Split login.componentとapp.component

メインアプリケーションレイアウトとはかなり異なるログインページを作成しようとしていますので、app.componentからlogin.componentを分離しようとしています bodyclassプロパティを使用してbodyのクラス属性を設定します要素私はまた、これを処理し、自分のやり方が間違っているか、またはうまくいっているという経験を聞きたい。Split login.componentとapp.component

ここで私のindex.html、login.component.tsおよびapp.component.tsファイルはどのように見えますか？私はuseage

のような任意の例に遭遇したことがない

import { Component } from '@angular/core'; 
import {Auth} from '../auth/auth.service'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: [ 
    '../../assets/css/colors/cyan.css' 
    ] 
}) 
export class LoginComponent { 
    bodyclass = 'body-login-class'; 
    constructor(private auth:Auth){} 
}

app.component.ts

import { Component } from '@angular/core'; 
import {Auth} from './auth/auth.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css', 
    'assets/css/colors/default.css', 
... 
     ] 
    }) 
    export class AppComponent { 
     bodyclass = 'body-general-class'; 
     constructor(private auth:Auth){} 
    }

index.htmlを

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>AngTs19December</title> 
    <base href="/"> 
    <script src="http://cdn.auth0.com/js/lock/10.2/lock.min.js"></script> 
</head> 
<body [class]="bodyclass"> 
    <app-root>Loading...</app-root> 
<app-login></app-login> 
     <!-- Global Plugin JavaScript --> 
... 
</body> 
</html>

app-rootとapp-login

同じファイル内にあるので、とにかく私はこれを実行すると私が直面するエラーです。

とlast;ページでなければなりません routes.ts ログインページは常に彼らはあなたはインデックスページで<app-root></app-root>と<app-login></app-login>の両方を持つことはできません

import {ModuleWithProviders} from '@angular/core'; 
import {Routes, RouterModule} from '@angular/router'; 
import {AuthGuard} from './auth/auth.guard'; 
import {HomeComponent} from './home/home.component'; 
import {LoginComponent} from './login/login.component'; 
const appRoutes: Routes=[ 
    { 
     path:'home', 
     component:HomeComponent, 
     canActivate:[AuthGuard] 
    }, 
    { 
     path:'', 
     component:LoginComponent 
    } 
]; 

export const appRoutingProviders: any[] = []; 
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

出典

2016-12-19 TyForHelpDude

サインインしているユーザーを歓迎します。

変更app.component.tsファイル：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
     <router-outlet></router-outlet> 
    ` 
}) 

export class AppComponent { }

重要な部分がありますが<router-outlet></router-outletです。インデックスファイルに

、ローカルホストを使用する場合のは言わせて、あなたのルートによると<app-login></app-login>

を削除する：3000、ユーザーがログインページ（LoginComponent）をlocalhost:3000に移動したときに表示されています。そこから、資格情報が正しい場合、ユーザーをHomeComponentにルーティングできます。

出典

2016-12-19 22:31:00 Alex

Angularサイトのルーティングドキュメントを確認しましたか？ https://angular.io/docs/ts/latest/tutorial/toh-pt5.html – Alex

実際にはい、私は私のアプリを変更した、私はこの問題を解決したと思うので、私は（あなたも投稿をすることができます:)あなたの答えもこの投稿をチェックすることができます：http://stackoverflow.com/questions/41231728/set-value-of-class-attribute-of-body-element-with-ngclass – TyForHelpDude

Split login.componentとapp.component

答えて

関連する問題