Question

所以我按照angular.io（https://angular.io/docs/ts/latest/tutorial/）的教程进行了操作。我现在有路由设置，我的AppComponent有一个“app”选择器。这很好。我的app.html中有<router-outlet></router-outlet>标记。这也很好，取代内容作为我导航到不同的路线。

我的问题是，我已经开始设置自己的导航栏，我需要能够根据我从API加载的一些数据来更改栏。所以我创建了一个名为NavigationComponent的独立组件。我已将选择器设置为“导航栏”，并将标记<navigation-bar></navigation-bar>添加到我的app.html文件中。但它不会加载组件。

我做错了什么？每个文件如下所示。谢谢！

app.component.ts

imports ...

@Component({
    selector: 'app',
    templateUrl: 'app/views/app.html',
    styleUrls: ['app/styles/app.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS,
        AccountService
    ]
})
@RouteConfig([
    ...
])
export class AppComponent {
    title = 'Tour of Heroes';
}

navigation.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router-deprecated';
import {AccountService} from "../services/account";

@Component({
    selector: 'navigation-bar',
    templateUrl: 'app/views/navigation.html',
    styleUrls: ['app/styles/navigation.css']
})
export class NavigationComponent implements OnInit {
    isAuthenticated = false;

    constructor(private accountService: AccountService, private router: Router) {

    }

    ngOnInit() {
        this.isAuthenticated = this.accountService.checkAuthenticated();
    }

    logout() {
        this.accountService.clearCredentials();
        this.router.navigate(["Login"]);
    }
}

app.html

<navigation-bar></navigation-bar>

<router-outlet></router-outlet>

如果还有其他任何有用的内容，请与我们联系。

Answer 1

将NavigationComponent添加到directives列表（{em> AppComponent Component装饰者内）

imports {NavigationComponent} from .. @Component({ selector: 'app', templateUrl: 'app/views/app.html', styleUrls: ['app/styles/app.css'], directives: [ROUTER_DIRECTIVES,NavigationComponent], providers: [ ROUTER_PROVIDERS, AccountService ] }) @RouteConfig([ ... ]) export class AppComponent { title = 'Tour of Heroes'; }

组件选择器与路由提供程序

1 个答案: