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以获得更详细的解释！

指令属性为角2

1 个答案: