当前位置: 首页 > 编程笔记 >

Angular 2 更改路线(使用模板和指令)

公孙俭
2023-03-14
本文向大家介绍Angular 2 更改路线(使用模板和指令),包括了Angular 2 更改路线(使用模板和指令)的使用技巧和注意事项,需要的朋友参考一下

示例

现在已经设置了路由,我们需要一些方法来实际更改路由。

此示例将显示如何使用模板更改路由,但是可以在TypeScript中更改路由。

这是一个示例(无绑定):

<a routerLink="/home">Home</a>

如果用户单击该链接,它将链接到/home。路由器知道如何处理/home,因此它将显示HomeComponent。

这是数据绑定的示例:

<a *ngFor="let link of links" [routerLink]="link">{{link}}</a>

这将需要一个称为links存在的数组,因此将其添加到app.ts:

public links[] = [
    'home',
    'login'
]

这将遍历数组,并<a>使用routerLink指令=数组中当前元素的值添加元素,从而创建以下代码:

 <a routerLink="home">home</a>
 <a routerLink="login">login</a>

如果您有很多链接,或者可能需要不断更改链接,这将特别有用。我们通过仅向Angular提供所需的信息,让Angular处理添加链接的繁忙工作。

目前,它links[]是静态的,但有可能从其他来源获取数据。

 类似资料:
  • 对于Super Rentals,我们希望首先到达home页面,在上面显示租赁列表,然后可以跳转到about页面和contact页面。(下列测试在/opt/super-rentals目录下进行) about路由 生成about路由: $ ember generate route about installing route create app/routes/about.js create

  • 我的angular 2组件有以下模板,但它抛出了一个模板解析错误。 这是错误消息-我的

  • 我有一个NgSwitch模板。在NgSwitch中,我想获取初始化模板的模板引用。大致如下: 当单击组件中的按钮时,我想调用初始化组件(第一个/第二个/第三个)到一个方法(在所有这些 3 个组件实现的接口上定义)。问题是视图子项未定义。如果我#ref移动到容器 div,如下所示: ViewChild(模板引用)已初始化,但我可以调用组件的方法。 如何同时使用NgSwitch指令和模板引用变量?或者

  • 问题内容: 我可以在控制器中看到该事件,但看不到如何告诉Angular留下。我需要弹出类似“您要保存,删除还是取消?”这样的信息。如果用户选择“取消”,则停留在当前“页面”上。我看不到任何允许侦听器取消路由更改的事件。 问题答案: 您正在听错事件,我做了一些谷歌搜索,但在文档中找不到任何内容。快速测试: 在全局控制器中,阻止了位置更改。

  • wx:if 预期: any 用法: 根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 注意:如果元素是 <block/>, 注意它并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。 WARNING 当和 wx:if 一起使用时,wx:for 的优先级比 wx:if 更高。详见列表渲染教程 参考: 条件渲染 -

  • 问题内容: 关于扩展django管理模板的一个(不是这样)快速问题。 我试图通过在结果行(row1和row2类)之间添加一个包含一些与该对象相关的对象的中间行来更改特定模型的结果列表(在django lingo中更改列表)。 我搜索了代码,但没有找到一种方法来执行此操作。非常感谢任何指针。代码也将有所帮助。 PS:我知道我应该设计自己的界面,但这是一个内部项目,我没有太多时间可以花时间。另外,dj