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

早上好

我一直在学习Angular 5，尽管有很多新东西，但有些东西我还不知道该怎么做

过去我研究过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中实现它，因为到目前为止，我只找到与每页组件相关的示例和代码

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

哦，这非常简单

这是：

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

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

超级简单：）

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

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

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

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

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

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“菜单”，
模板：`东西在这里`
})
导出类菜单组件{
}

Angular docs有一个教程叫做heros之旅，它深入到Angular