属性绑定不适用于[routerlink] ANGULAR
属性绑定不适用于[routerlink] ANGULAR。在Angular中，属性绑定通常用于将组件的属性绑定到HTML元素的属性上，以便在组件和模板之间进行数据传递。然而，[routerLink]是Angular中的一个指令，用于在页面之间进行导航。它是一个结构性指令，而不是一个属性，因此不适用于属性绑定。
[routerLink]指令用于在Angular路由中定义导航链接。通过指定目标路由的路径，可以轻松地在不同的页面之间进行导航。它可以用于导航到具有特定路径的组件，并可以传递参数给目标组件。
在Angular中，我们可以使用属性绑定来将组件的属性值动态地绑定到HTML元素的属性上。这样，当组件的属性值发生变化时，相应的HTML元素属性也会更新。然而，[routerLink]指令不是一个HTML元素属性，而是一个Angular指令，因此不能使用属性绑定。
如果要在Angular中使用[routerLink]指令进行导航，可以直接在模板中使用它，例如：
<a [routerLink]="'/path/to/component'">Go to Component</a>这将创建一个导航链接，当用户点击该链接时，将导航到指定路径的组件。可以将目标路径设置为字符串常量，也可以将其绑定到组件的属性或方法返回的动态值上。
在腾讯云的产品中，与Angular的导航和路由相关的服务和功能包括腾讯云的云服务器CVM、负载均衡CLB、弹性公网IP EIP等。这些产品可以为Angular应用程序提供高可用性和稳定性，以及快速响应时间。具体的腾讯云产品介绍和链接地址请参考腾讯云官方文档。
相关·内容
我试图根据组件中的一组动态项在指令中设置routerLink值。但是，Angular2引发了一个错误：
EXCEPTION: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 1 in [ {{item.routerLink}} ] in AppHeader@5:40 ("
<a *ngFor="let item of headerItems" [ERROR ->][routerLink]="
浏览 7提问于2016-05-06得票数 50
回答已采纳
我希望将一个对象从app.component传递给子组件(home.component)。我是否使用了错误的路由方式，这就是为什么我希望将对象传递给的子组件被呈现两次？我怎么才能避免呢？我猜这也可能是第二次呈现组件时该对象未定义的原因。
我已经在谷歌上搜索了好几天了，但似乎没有什么效果。我是跟随一个视频教程，但它是基于角2 RC3或更早，我想。我用的是角2.1.1
如果删除下面的行，则只生成一次子组件。但是我不能把物体传递给它。
<app-home [testdata]="testdata"></app-home>
下面是代码：
app.compone
浏览 1提问于2016-10-27得票数 1
回答已采纳
我试图使用isRouteActive来确定特定路由是否处于活动状态，但是出现了错误，angular2.dev.js:23730 TypeError: l_context.isRouteActive不是函数
<li [class.active]="isRouteActive(router.generate(['/Users']))"><a [routerLink]="['Users']">Users </a></li>
我已经看过了这些文档，非常惊讶为什么有两个不同的文档用于路由器类。
浏览 3提问于2016-05-04得票数 4
关于下面的错误。我在RouterLink上遇到模板解析错误。
在Angular 2中使用RouterLink的正确方法是什么？
Unhandled Promise rejection: Template parse errors:Parser Error: Unexpected token / at column 2 in [[/events]] in ng:///t/e.html@30:46 ("r">
<ul class="nav nav-sidebar">
浏览 1提问于2017-04-02得票数 4
回答已采纳
我在Angular 4中有一个组件，以及一个模板来更改这个组件被调用的路径，但不会加载任何没有服务器调用的内容。如果我将ngOnInit()方法的内容放入构造函数中，它就能正常工作。似乎没有调用ngOnInit。任何人，请帮助我正在工作，因为过去的2天。
这是我的路由配置。
const testRouting: ModuleWithProviders = RouterModule.forChild([
{ path:'createtest/:id', component:TestComponent, resolve: { test:TestResolver }}
浏览 0提问于2017-06-29得票数 7
回答已采纳
我用JavaScript在angular HTML中添加了routerLink属性：
let Link: string = "routerLink";
tailDiv.setAttributeNS(null, Link, this.subItems[i].route)
tailDiv元素如下所示：
<div class="tail" routerLink="/panel/country/add">کاربر جدید</div>
但它不工作，也不在链接中。
有什么问题吗？
浏览 0提问于2019-08-23得票数 0
2回答
我有以下几点：
我收到一个错误，说：
compiler.es5.js:1690 Uncaught Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. (" <div class="navbar-header">
<ul class="nav navbar-nav list-inline"&
浏览 0提问于2017-08-25得票数 0
1回答
如何动态更改模板中HTML元素上设置的属性？
我有一个锚包装组件，它同时接受href和routerLink属性。只需要设置其中一个。我想要编写它的模板，以便我只在href和routerLink元素上设置一个属性，不管定义了哪种属性。
如果不使用*ngIf分别定义这两种情况，是否有可能？
anchor.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'my-anchor',
templateUrl: './a
浏览 0提问于2018-10-12得票数 0
所以我已经开始了一个新的角度项目，我为它做了一个导航条，下面是代码
navbar.component.html：
<nav>
<li class="navbar-list">
<a [routerLink="/home-component"] [class="home-link"]>Home</a>
<a [routerLink="/about.component"] [class="about-link"]>About</a&g
浏览 0提问于2022-08-20得票数 1
回答已采纳
1回答
在我的Angular web应用程序中有一个下拉菜单： <div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">NAMEOFDROPDOWN
<span class="caret"></span></button>
<ul *dropdownMenu class="dropd
浏览 17提问于2020-02-03得票数 0
回答已采纳
2回答
我已经用angular-cli创建了angular 2项目。我创建了单独的AppRoutingModule，它导出RouterModule并添加到AppModule imports数组中。
我也有由angular-cli创建的appComponent。
app.component.html
<nav>
<a *ngFor="let view of views" routerLink="{{ view.address }}" routerLinkActive="active">{{ view.text }}</a&
浏览 3提问于2016-10-18得票数 23
回答已采纳
我试着理解单向绑定和插值之间的区别，发现对于ngClass，这两者似乎是等价的，但对于ngStyle，我无法使用插值来使其工作(只有绑定有效)。请参阅以下StackBlitz：https://angular-a6cvfb.stackblitz.io以获取实时示例。 下面注释掉的ngStyle语法对我来说都不起作用。我错过了什么吗？非常感谢！ {注意:所有被注释掉的东西都是这样的，否则就会破坏代码}。 import { Component, Input } from '@angular/core';
@Component({
selector: 'hello
浏览 38提问于2019-04-10得票数 1
我有一个长的文本显示在我的应用程序，所以我想使用字符串的HTML。
// component
description: string = `<p>Hello world. <a routerLink="/home">Click here</a> to go to the home page.</p>`;
// template
<div class="content">
<div innerHTML="description"></div>
</div
浏览 0提问于2019-04-29得票数 1
回答已采纳
我正在尝试创建一个行为类似于指令的。
因此，我实现了示例，并添加了Angular的中的部分，其中它通过装饰器获得了子对象。
// TODO(issue/24571): remove '!'.
@ContentChildren(RouterLink, { descendants: true })
links !: QueryList<RouterLink>;
// TODO(issue/24571): remove '!'.
@ContentChildren(RouterLinkWithHref, { descendants: true })
lin
浏览 1提问于2019-01-11得票数 2
1回答
我在和玩。一切正常，看上去很好。然而，在我将路由从根页面添加到仪表板和英雄的细节之后，我在控制台中得到了以下错误：
Unexpected condition on http://localhost:3000/dashboard: should only include this file once
在我点击到仪表板的链接后就会看到错误。从这一行代码中抛出消息：
expect(!loadTimeData, 'should only include this file once');
在in 1812:155中。JS版本是V8 5.6.326.50。正如在package.json中
浏览 5提问于2017-03-26得票数 3
回答已采纳
我是新来的，所以请容忍我。
我的admin-documentaries.component.html有以下文本：<p>admin-documentaries works!</p>
我的admin- has .Component.html有以下文本：
<p>admin-home works!</p>
<a [routerLink]="['/admin/home']" routerLinkActive="active">
Home
</a>
<a [rout
浏览 0提问于2019-07-05得票数 0
1回答
我对角度2还不熟悉，所以我可能一开始就做错了。
我有我的主导航，它使用路由器显示我的不同页面。在其中一个页面(称为A页)中，我有一个列表，当单击一个项目时，在同一页上提供一个不同的边栏。我将侧栏组件设置为分页A的子路由，但是当我单击列表项之一时，会得到错误错误: error:不能匹配任何路由。
这是app.component.html，这是我的导航，为A页服务。
<header class="row">
<ul class="col-md-9 col-lg-8 col-lg-offset-1 ">
<li><
浏览 3提问于2017-10-06得票数 0
角2 在模板中展示了带有方括号和不带方括号的routerLink示例：
<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page:
浏览 1提问于2016-08-23得票数 35
回答已采纳
1回答
我正在用angular2创建我的第一个应用程序，当它出现在我使用formBuilder的第一个实体更新表单时，我将面临一个两难的境地。我做了一份工作表格，但仍不确定它是否符合最佳做法。
我的对象来自一个mongoDb集合。具有两个简单文本属性的对象开销。
这是我在控制器里所做的。
import {Component, View} from 'angular2/core';
import {RouteParams} from 'angular2/router';
import {Expenses} from 'collections/expenses&
浏览 4提问于2016-01-08得票数 2
好吧，我在这里找不到错误。我以前使用过这段代码，但从未以同样的方式使用过。
当我使用@Input并尝试console.log结果时，我只得到对象对象。即使我设置它的默认值或尝试记录名称，它也表示名称是未定义的。这是四个文件。
英雄卡。组件。
import { Component, Input } from '@angular/core';
@Component({
selector: 'hero-card',
templateUrl: 'app/views/play/hero-card/hero-card.html'
})
ex
浏览 5提问于2016-07-18得票数 3
回答已采纳
尝试从绑定到模板类的数据绑定routerLink。根据angular.io文档，模板语法似乎是正确的。我已经在应用程序和组件级别尝试了ROUTER_PROVIDERS和ROUTER_BINDINGS (两者仍然是一个谜)，但都没有用。我的代码抛出了'helpfull‘错误：TypeError: linkParams.reduce is not a function in [[ 'ClassDetail', {id: class._id} ] in ]
模板：
<div class="container" >
<div class=&
浏览 1提问于2016-01-04得票数 0
我使用了ESLint和ESLint的角12，输出了以下错误：
70:3错误使用@HostBinding或@HostListener而不是host元数据属性() @角-eslint/无宿主元数据-属性
有很多类似的话题，比如，但是我的主机更复杂。
host: {
'[class.active-menuitem]':
'(selectedKey && app.isHorizontal()) || (active && !app.isHorizontal()) ' +
'|| (activ
浏览 1提问于2021-07-27得票数 0
回答已采纳
我的app.component.html页面中有以下html标记
<a (click)='clicked=0' style='border-style: solid; padding: 5px 50px 5px 50px;' routerLink='/route/show'>Show Details</a>
但是，当我在chrome中加载这个页面并查看chrome开发工具中的html时，它会显示如下
<a routerlink="/route/show" style="border-style
浏览 21提问于2018-01-03得票数 3
回答已采纳
我正在构建一个Angular 7应用程序。在这个应用程序中，我得到了一组链接。当页面加载每个链接的getRouterURL时(每次我单击其中一个链接时，都会触发该方法。这是正确的行为吗？感觉像是在浪费内存吗？
<a [routerLink]="getRouterURL('normal')">Link</a>
<a [routerLink]="getRouterURL('normal')">Link 2</a>
<a [routerLink]="getRouterURL(
浏览 9提问于2019-03-28得票数 1
回答已采纳
这是我的index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code Concrete</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
浏览 2提问于2018-05-08得票数 0
1回答
我有一个简单的基于Angular2的web应用程序，与身份验证。我遇到了一个问题，根据用户是否登录，导航栏看起来不同，而且当用户没有登录时，一些组件也不会显示。
例如，当用户单击logout时，导航栏会发生变化，但另一个组件直到页面刷新后才会消失。当按下LogOut按钮时，如何触发元件刷新？
//user.service.ts
logout() {
localStorage.removeItem('id_token');
this.loggedIn = false;
}
//nav.component.ts
import { Component, In
浏览 45提问于2016-03-29得票数 5
在angular 2项目中集成的正确方式是什么？我已经完成了提供的必要步骤。但火狐的动画效果仍然起伏不定。
我已经使用最新的angular cli (版本: 1.0.3)创建了一个新的angular项目，并通过在package.json中编辑依赖项降级了angular版本。动画在chrome中工作正常。
我是不是漏掉了什么？
Package.json -
"dependencies": {
"@angular/common": "~2.4.1",
"@angular/compiler": "~2.4.1&#
浏览 16提问于2017-07-20得票数 2
回答已采纳
我想在我的页面上使用select元素创建导航。在锚标记上使用RouterLink指令很简单，但是有没有与select下拉菜单等效的指令呢？或者，当我的select发生变化时，我是否需要在组件上创建自己的导航方法来调用？
<a [routerLink]="[location]">Location</a>
<select (change)="navigate($event.target.value)">
<option>--Select Option--</option>
<opti
浏览 3提问于2016-05-22得票数 5
回答已采纳
1回答
Angular不识别数据悬停。
无法绑定到“data-hover”，因为它不是“span”的已知属性
我已经尝试了span，div没有成功。现有页面在很大程度上依赖于数据悬停，因此重写不是一种选择。
<a class="main-item" routerLink='{{ item?.url}}'>
<span class="main-item-hover" data-hover="{{item?.label}}">{{item?.label}}</span>
</a>
这段代
浏览 11提问于2017-07-17得票数 1
回答已采纳
7回答
我正尝试在我的Angular 7应用程序中使用带有href的锚标签。当我点击链接时，浏览器中的url会改变，但是页面不会被导航到。如果我把target=写成“_self”，它就能工作。
<a href="/abcd" target="_self">Abcd</a>
但是，这并不只是浏览器中的url发生了变化，而是什么也没有发生。
<a href="/abcd">Abcd</a>
就像我使用Angular routing和RouterLink一样，它可以工作。
<a routerLink=
浏览 7提问于2019-09-24得票数 24
你好，亲爱的，极客，我对angular2有个问题:我正在用angular2开发一个应用程序
(menuComponent, menuView.html)
(listProductComponent, listProductView.html)
(detailProductComponent, detailProductView.html)
我在menuView.html中有一个按钮来添加像这样的新产品
<ul class="nav nav-tabs">
<li><a class="active" [routerLink]=&
浏览 2提问于2016-03-01得票数 2
回答已采纳
我想在我的Angular 2应用中路由时禁止更改URL。
我知道必须将skipLocationChange: true作为NavigationExtras参数传递给路由器。
我的问题是：
可以从模板内部向routerLink传递NavigationExtras吗？
我尝试过的：
<h1>
{{title}}
</h1>
<ul>
<li><a [routerLink]="['route1', { skipLocationChange: true }]">Route1</a>&l
浏览 4提问于2016-11-09得票数 19
回答已采纳
这是我的html，指向组件(只是其中一个选项)-
<a
class="linkCategoriesInner__link"
[routerLink]="['/product-list']"
[queryParams]="{ gender: 2, category: 5 }">
Sneakers
</a>
这是我的组件ngOnInit -
ngOnInit() {
this.route.data.subscribe((data: Data) => {
const pr
浏览 3提问于2021-08-09得票数 0
当页面加载导航应该隐藏时，我正在处理导航默认设置。当我点击图标时，我想像切换一样显示导航。当我将鼠标移出导航时，我应该隐藏导航。angular 4.0。
index.html
<button class='user_login' (click)='btnResult()'>
<img src="./assets/menuicon.png" >
</button>
nav.component.html
<ul class="nav navbar-nav navbar-right menu&#
浏览 0提问于2017-07-11得票数 1
2回答
在我的angular应用程序中，我尝试使用angular innerHTML将一个字符串绑定到一个div，这是字符串
sample = "<a routerLink='/tags/name/'>Test</a> smod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam";
这是html页面
<p [innerHTML]="sample"></p>
现在我的问题是，锚标签现在可以工作了，它只显示T
浏览 1提问于2020-07-13得票数 0
我有以下七号角的路线：
<a [routerLink]="['/categories', {{ category.name | slugify }}, category.id]">{{category.name}}</a>
问题在于如何在slugify中应用管道routerlink。
如何将管道应用于routerLink中的值
浏览 1提问于2019-07-09得票数 1
回答已采纳
2回答
我正在尝试使用Angular/4在Angular CLI项目中实现路由动画。我一直在尝试学习教程，但收效甚微。
我的代码是
/src/app/_animations/fadein.animation.ts
import { trigger, state, animate, transition, style } from '@angular/animations';
export const fadeInAnimation =
// trigger name for attaching this animation to an element using the
[@tri
浏览 3提问于2017-04-27得票数 13
尝试使用angular2创建SPA：
在我的主要模块中，我声明将要使用的路由和组件：mainApp.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { BaseComponent,IndexComponent, ContactComponent,
浏览 3提问于2017-03-26得票数 0
回答已采纳
我想采用特定模块中具有已定义路径的所有路由，并使用ngFor循环通过它们，并在我的组件html中创建一个动态链接列表。
ngFor示例(overview.component.html)：
<li *ngFor="let item of items; let i = index;">
<a routerLink="/{route.path}">{route.path}</a>
</li>
模块示例(base.module.ts)：
...
const routerConfig = [
{
path
浏览 0提问于2017-02-06得票数 4
目标:创建一个包含两个数组的动态列表。
电子邮件是一个静态创建的选项
数组路由：
[[{pri_access:"Administracion/Usuarios",pri_name:"Usuarios"},{pri_access:"Administracion/Privilegios",pri_name:"Privilegios"},{pri_access:"Administracion/Rol",pri_name:"Rol"}],[{pri_access:"Reporte/V
浏览 0提问于2021-02-04得票数 0
2回答
我正在捆绑angular2应用程序。在dev-server模式下，路由工作得非常好。但是，当我使用下面的webpack配置将应用程序部署到Tomcat服务器上时，路由不起作用。即使我也不能通过直接的url访问这个页面。例如，我想通过访问某个页面(如果您查看app.routing.ts，AppComponent映射到搜索，我将生成的.js文件放在webapps的测试目录中)，但它显示HTTP404状态。我只能通过欢迎页面中的链接访问搜索页面。如果有人知道这一点，请给出一些建议。
webpack.common.js
var webpack = require('webpack');
浏览 1提问于2016-12-14得票数 0
2回答
当我改变屏幕尺寸时，我的肚脐没有打开菜单，我遇到了麻烦。
下面是我正在运行的依赖项的版本：
"@angular/animations": "~9.0.6",
"@angular/common": "~9.0.6",
"@angular/compiler": "~9.0.6",
"@angular/core": "~9.0.6",
"@angular/forms": "~9.0.6",
"@
浏览 2提问于2021-10-04得票数 0
回答已采纳
我尝试创建一个简单的angular2组件，并且在将指令绑定到原生DOM元素时出错。
例如：
/// <reference path="../../typings/_custom.d.ts" />
import { Component, View } from 'angular2/angular2';
import { RouterLink } from 'angular2/router';
@Component({
selector: 'my-component',
directives: [Rou
浏览 4提问于2015-08-27得票数 6
回答已采纳
4回答
我想知道是否有一种方法可以在Angular7中命名我的路由，这样我就可以调用[routerLink]="myRouteName"而不是`routerLink=“/ my /path/path”。
如果是的话，我怎样才能做到呢？
浏览 0提问于2018-12-04得票数 19
回答已采纳
5回答
我有两个组件，全布局(父组件)和部门(子组件).
当完整布局中的变量被绑定并传递给子组件时，它总是声明它是未定义的。我不知道为什么。
full-layout.component.html
<ul class="nav-dropdown-items">
<li class="nav-item" *ngFor="let item of dropDownItems">
<a #clicked class="nav-link" routerLinkActive="activ
浏览 6提问于2017-02-17得票数 1
3回答
所以我有一个简单的代码，但是当我运行的时候，它不会隐藏，div，我在这里找不到像这样简单的代码，我刚刚开始使用angular。isnurse返回"true“
<div *ngIf="user">
<img src="assets/logo.png">
<h1>Hello {{user.firstName}}, {{user.isnurse}}</h1>
<a href="/api/auth/signout">Signout</a>
<div ng-show=
浏览 6提问于2018-04-20得票数 0
3回答
对于特定的路由，我只了解如何使用*ngIf删除整个元素，即。
假设我只为routerLink="/"应用了一个应用程序(头)元素的类，这意味着如果我切换到"/other-page"，我需要报头来丢失这个类。
我怎样才能做到这一点？
如何将[ngClass]链接到路由更改？
代码：
import { Component, ElementRef, ViewChild, Renderer, AfterViewInit, Input } from '@angular/core';
import { LayoutService } from 'a
浏览 4提问于2017-03-31得票数 3
我有一个典型的带有链接列表的导航栏。
我试图通过创建一个简单的angular指令('authorize')来清理导航栏的HTML值，如下面的HTML代码片段所示，但要做到这一点，我需要我的指令能够接收列表中每个li项的routerLink属性值
这是我的导航栏html，在列表的顶层有'authorize‘属性。
<ul class="nav navbar-nav" authorize>
<li [routerLinkActive]="['active']">
<a [r
浏览 8提问于2018-04-13得票数 0
我正在尝试在AngularJS 2应用程序中呈现一组基于SVG的椭圆。`
Step 1: perform the set-up steps for https://github.com/mgechev/angular2-seed
Step 2: modify app.html (see below)
Step 3: modify app.ts (see below)
Contents of app.html:
```javascript
<a router-link="home">Home</a>
<a router-link="
浏览 0提问于2015-06-25得票数 0
我正在使用TinyMCE编辑器来管理我用Angular 4构建的网站。
一切都很正常，除了当我在tinyMCE编辑器中将routerLink属性添加到<a>标记时，routerLink变成了routerlink (不是驼峰式大小写)。
下面是我的tinyMCE初始化代码：
var editor_config = {
path_absolute : real_url,
selector: "#postTextArea",
valid_elements: '*[*]'
}
tinymce.init(editor_config);
我允
浏览 0提问于2017-07-18得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
