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

UserMan

早上好,

我一直在学习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中做到这一点,因为到目前为止,我只找到与每个组件相关的示例和代码。

也许这是一个非常简单的答案,但我会非常感谢您的帮助。

林哥

超级简单:)

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

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

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

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

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

}

Angular文档有一个关于英雄之旅的教程,它深入了角度。

https://angular.io/tutorial

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在Angular 4/5和TypeScript中重新加载同一页面

在angular4的同一页面中显示选定的下拉值

我如何使用Angular 13中的按钮路由到同一页面

Angular5,在路由上,URL更改,但未加载同一页面

Angular 2同一页面上有多个组件

根据 Angular 中的 http 响应,使用相同的组件在同一页面上显示不同的数据

Angular.js-如何将两个不同的链接重定向到同一页面,但在angular.js中显示不同的数据

如何在Angular2中检测到同一页面的路由?

离子-同一页面中的多个视图

同一页面中的多个弹出窗口

同一页面中的多个弹出div

如何使用Angular.js引导多个模块以在同一页面上显示

在同一页面上多次启动Angular App

当同一页面中多次包含一个组件时,绑定失败

导航到同一页面布局中的另一个组件

Angular 2:同一组件中的多个HTML页面

angular2:在同一页面上重复使用两次通用组件

如何在Elm的同一页面中多次加载带有标志的组件?

如何在同一页面中多次使用AngularJS 2组件?

React:如何链接到其他组件(在同一页面中打开)

偏移同一页面中的链接

jQuery表单在同一页面中

如何在同一页面中对多个查询集进行分页和排序?

如何在同一页面 HTML 的多个文本中显示当前日期?

CSS 同一页面中的多个表具有不同的 ID

同一页面中存在多个SVG-消失和颜色改变

使用jQuery在同一页面中的多个选项卡

如何在Codeigniter的同一页面中获取多个查询结果

同一页面中的多个ajax表单无法正常工作