角度 2 中的指令属性

Question

我尝试使用指令 ([]) 声明我的组件，但没有成功。然后我知道在 RC6 中它已被弃用。所以我在声明@ngmodule 中添加了组件，但它仍然不知道为什么？ 编辑 ：： 那是我的 module.ts ::

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import {NavBarComponent} from "./Components/navbar/navbar.component";
import {AboutComponent} from "./Components/about/about.component";

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ,NavBarComponent , AboutComponent],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

那是我的 app.component.ts ::

import {  Component } from '@angular/core';
//import {AboutComponent} from "./Components/about/about.component";

@Component({
  selector: 'my-app',
  template: `<h1>{{name}}</h1>`,


})
export class AppComponent  {  }

现在 NavBar 组件有 .html 文件 ::

<nav class="navbar navbar-inverse ">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Spotify</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>

      </ul>
    </div>
  </div>
</nav>

还有 Navbar.component.ts ::

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


@Component({
  moduleId: module.id,
  selector: 'navbar',
  templateUrl : 'navbar.component.html',
})
export class NavBarComponent  {  }

我正在使用角度快速启动，没有输出错误，但是当我重新加载页面时没有发生任何变化并且导航栏设计不显示

Answer 1

您似乎错过了真正应该加载组件的位置，因此您需要在某处添加<router-outlet>，在您的情况下为app.component。如果您希望始终显示导航栏，请将该标签放在app.component

所以你的 app.component 应该是这样的：

import {  Component } from '@angular/core';
import {NavBarComponent} from "./Components/navbar/navbar.component";

@Component({
  selector: 'my-app',
  template: `
    // Navbar always shown 
    <navbar></navbar> 

    // Your other routed components will load here 
    <router-outlet></router-outlet>
  `,
})
export class AppComponent  {  }

请查看official docs for routing 以获得更详细的说明！