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

Posted 2023-03-13

【中文标题】Angular 5中同一页面中的多个组件

【英文标题】：multiple components in same page in Angular 5

【发布时间】：2018-06-22 00:27:24

【问题描述】：

早上好，

我一直在学习 Angular 5，尽管有很多新东西，但我还没有意识到如何去做。

过去我研究过 AngularJS，所以我试图了解 Angular 5 并看看框架是如何变化的，

目前我正在处理一个可以在 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 中执行此操作，因为到目前为止我只找到与每个页面的组件相关的示例和代码。

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

【参考方案1】：

哦，很简单！

这里是：

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

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

【参考方案2】：

超级简单:)

您无需使用控制器标记每个元素，而是创建自定义组件。

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

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

import  Component  from '@angular/core';

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

Angular 文档有一个关于英雄的教程调用之旅，它深入探讨了 Angular。

https://angular.io/tutorial