Question

我刚刚通过以下角度代码，它是星云框架的一部分（它是角度2应用程序的基本UI组件库）：

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

@Component({
  selector: 'nb-layout-header-test',
  template: `
    <nb-layout>
      <nb-layout-header fixed>
        <a class="navbar-brand" href="#">ngx-admin</a>
      </nb-layout-header>
    </nb-layout>
`,
})
export class NbLayoutHeaderTestComponent {
}

可以看到上面的代码行here。

现在我不太清楚<nb-layout>和<nb-layout-header fixed>究竟是什么，这些单独的组件已在其他地方定义并在这个特定组件中使用？

我是棱角分明的新手，大多数都看到了如下所示的简单组件：

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

@Component({
    selector: 'my-friends'
    template: `
        <h1>Hello from the {{ componentName }}!</h1>
        <div *ngFor="#f of friends">
            <h3>Name: {{ f.name }}</h3> 
            <h4>Age: {{ f.age }}</h4> 
        </div>
    `
})

有人可以向我解释这个组件究竟是如何构建的？

Answer 1

是的，这些是单独的组件，并在其他地方定义，就像您使用名为nb-layout-header-test的选择器一样。这意味着只需编写

即可使用此组件

<nb-layout-header-test>

您应用程序中的任何位置。

了解嵌套角度组件

1 个答案: