Angular 5 中同一页面中的多个组件

Question

早上好，

我一直在学习 Angular5，尽管有很多新东西，但有些事情我还不知道如何完成。

以前学的是AngularJS，所以想了解一下Angular5，看看框架有什么变化，

目前我正在处理一件我可以在 Angular JS 中做的简单事情，每页多个控制器，类似这样。

<div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
</div>

<div class="menu" ng-controller="menuController">
    <p>Other stuff here</p>
</div>

但我不知道如何在 Angular 5 中执行此操作，因为到目前为止我只找到与每页组件相关的示例和代码。

也许这是一个非常简单的答案，但我真的很感激任何帮助。

Answer 1

哦，很简单！

这里是：

<app-widget></app-widget>
<app-menu></app-menu>

在 Angular 中，您创建的组件将替换与其选择器匹配的标签。

Answer 2

超级简单:)

您可以创建自定义组件，而不是用控制器标记每个元素。

<widget></widget>
<menu></menu>

您可以通过执行以下操作来声明自定义组件...

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

@Component({
  selector: 'menu',
  template: `<div> stuff goes here </div>`
})
export class MenuComponent  {

}

Angular 文档有一个教程 call tours of heroes，它深入 angular。

https://angular.io/tutorial

Angular 5 中同一页面中的多个组件

multiple components in same page in Angular 5

angular-components

angular

angular5