Сплит login.component и app.component

Я пытаюсь создать страницу входа, которая весьма отличается от основного макета приложения, поэтому я пытаюсь отделить login.component от app.component Я также использую свойство bodyclass для установки атрибута класса тела элемент Я также хочу услышать любой опыт, который справляется с этим, и сказать, что мой путь неправильный или прекрасный.Сплит login.component и app.component

Здесь отображаются мои файлы index.html, login.component.ts и app.component.ts;

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>

Я никогда не сталкивался любой, например, как Useage

приложение корень и приложение-Логин

в одном файле, так что это беспокоит меня .. в любом случае здесь ошибка я сталкиваюсь, когда я запускаю это.

и последний; routes.ts Войти страница должна быть страница приветствует пользователь всегда они подписываются в

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-root></app-root> и <app-login></app-login> как на индексной странице.

Изменение 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, когда пользователь переходит на localhost:3000 страницу входа в систему (LoginComponent) показан. Оттуда вы можете перенаправить пользователя в HomeComponent, если учетные данные верны.

источник

2016-12-19 22:31:00 Alex

Вы проверили документацию по маршрутизации на Угловом сайте? https://angular.io/docs/ts/latest/tutorial/toh-pt5.html – Alex

на самом деле да, и я изменил свое приложение, я думаю, что решил эту проблему, поэтому я участвую (можете ли вы также добавить сообщение :) ty) ваш ответ также вы можете проверить это сообщение: http://stackoverflow.com/questions/41231728/set-value-of-class-attribute-of-body-element-with-ngclass – TyForHelpDude

Сплит login.component и app.component

ответ

Смежные вопросы