天道酬勤,学无止境

角度变量到 routerLink(Angular variable into routerLink)

问题

我试图在我的 routerLink 中传递一个 id,我该如何连接它?

<a routerLink="['/details', {{data.id}}]"> </a> doesnt work.

你有解决方案吗?

提前致谢

回答1

你去吧。

<a [routerLink]="['/details', data.id]"> Link </a>
回答2

参数作为数组语法中的第二项传递给路由器链接,如下所示:

[routerLink]="['/details', data.id]

在这里阅读更多

回答3

与上面类似,但您也可以这样做:

<a [routerLink]="['/details' + data.id]"> Link </a>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 使用RouterLink动态添加元素(Add element with RouterLink dynamically)
    问题 当我在这样的Angular组件中的某个地方放置锚元素时: <a [routerLink]="['/LoggedIn/Profile']">Static Link</a> 一切都很好。 单击链接时,Angular路由器导航到目标组件。 现在,我想动态添加相同的链接。 在我的应用程序的某个地方,我有一个“通知组件”,它的唯一职责是显示通知。 通知组件执行以下操作: <div [innerHTML]="notification.content"></div> 其中notification.content是NotificationComponent类中的公共字符串变量,其中包含要显示的HTML。 notification.content变量可以包含以下内容: <div>Click on this <a [routerLink]="['/LoggedIn/Profile']">Dynamic Link</a> please</div> 一切正常,并显示在屏幕上,但是当我单击动态链接时没有任何反应。 有没有办法让Angular路由器使用此动态添加的链接? PS:我了解DynamicComponentLoader ,但是我确实需要一个更不受限制的解决方案,在该解决方案中,我可以使用各种不同的链接将各种HTML发送到通知组件。 回答1 routerLink是一个指令。 没有为使用
  • [innerHTML] 中的 Angular routerLink(Angular routerLink within [innerHTML])
    问题 我一直在寻找一种方法,使标准 a[href] 链接在动态加载到 [innerHTML] 时能够像 routerLinks 一样工作。 它似乎不是标准的东西,我找不到任何可以满足我需要的东西。 我有一个可行的解决方案,但想知道是否有人知道任何更好的方法来做到这一点,或者我可能会遇到任何潜在的问题。 我在 app-routing.module.ts 中使用 jQuery,所以我声明了变量: declare var $:any; 然后我找到所有具有 href 属性但不具有 routerlink 属性的锚点。 然后我可以获取路径名并告诉路由器在单击时导航到它。 $(document).on('click', `a[href]:not("a[routerlink]"):not("a[href^='mailto:']"):not("a[href^='tel:']")`, function(e){ if(location.hostname === this.hostname || !this.hostname.length){ e.preventDefault(); router.navigate([this.pathname]); } }); 这似乎可以完成这项工作,但我认为必须有一种更“角度”的方式来做到这一点...... 回答1 这可能不是最好的方法
  • 带有命名插座的角度路由器链接(角度 5.0.2)(Angular routerLink with named outlet (angular 5.0.2))
    问题 我已阅读有关此问题的所有帖子,但没有一个对我有用。 我有一个应用程序模块,一个路由模块,没有其他“模块”。 我发现的是... 标准路由可以从任何组件链接到带有命名出口的路由只能从默认的应用程序组件链接到,而不能从其他组件链接到使用 routerLink 从应用程序组件以外的任何内容链接到命名插座会导致“错误:无法匹配任何路由。URL 段:” 我的路线是这样... {path: 'hellocontent', component: ContentHelloWorldComponentComponent, pathMatch: 'full', outlet: 'helloc'}, 路由器链接是... <a [routerLink]="[{ outlets: { helloc: ['hellocontent'] } }]">action</a>. 我的路由器插座是... <router-outlet name="helloc"></router-outlet> <router-outlet></router-outlet> 该路由器链接在标准的 angular app.component.html 中完美运行,但不适用于任何其他组件。 它总是导致“错误:无法匹配任何路由。URL 段:”。 当我删除指定的出口,改变routerLink来...... <a routerLink=
  • 将点击附加到有角度的锚标签(Attaching click to anchor tag in angular)
    问题 我正在尝试将点击事件附加到锚点标签(来自 ajax)并阻止默认重定向。 我怎样才能在 angular 中做到这一点? <ul> <li><a href="/abc"><p>abc</p></a></li> <li><a href="/abc1"><p>abc1</p></a></li> <li><a href="/abc2"><p>abc2</p></a></li> <li><a href="/abc3"><p>abc3</p></a></li> </ul> 在 ts 文件中: constructor(elementRef: ElementRef, renderer: Renderer) { this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) => { event.preventDefault(); let target = event.target || event.srcElement || event.currentTarget; console.log(target); }); } 这会将事件附加到所有元素,如何将其限制为仅锚标记? 所有帮助表示赞赏。 回答1 您可以使用 routerLink(它是 angular 2+ 的href的替代方案
  • 角度路由未捕获错误(Angular Routing uncaught error)
    问题 我有以下几点: 我收到一条错误消息: 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"> <li class="home"><a [ERROR ->][routerLink]="['/home']">Login</a></li> <li class="child"><a [routerLink]="['/child']">Child</a>"): ng:///HomeModule/HomeComponent.html@7:25 Can't bind to 'routerLink' since it isn't a known property of 'a'. ("inline"> <li class="home"><a [routerLink]="['/home']">Login</a></li> <li class="child"><a [ERROR ->][routerLink]="['/child']">Child</a></li>
  • RouterLink 无法在角度为 2 的网格中工作(RouterLink not working in grid in angular 2)
    问题 最近我开始在我的 Angular 项目中使用 jqwidgets(这里),它运行良好,但唯一的问题是我在每个单元格中进行了编辑。那个编辑按钮 routerLink 不起作用。 我的代码, this.columns = [ { text: 'Id', columntype: 'textbox', width: 80 }, { text: 'Name', columntype: 'textbox',datafield: 'name', width: 130 }, { text: 'Group Name', columntype: 'textbox', datafield: 'group_id', width: 130 }, { text: 'Actions',datafield: 'id', cellsrenderer: Action, width: 100 } ]; 这是我的动作功能, var Action = function (row,datafield,value) { return '<button ><a routerLink="pages/users">EDIT</a</button>' } 当我用 href 替换 routerLink 时,任何人都可以帮助我。谢谢。 回答1 似乎这个小部件会将您的 html 代码直接添加到 DOM 中。 所以 angular
  • [routerLink] 和 routerLink 的区别(Difference between [routerLink] and routerLink)
    问题 [routerLink]和routerLink什么routerLink ? 你应该如何使用每一个? 回答1 您将在所有指令中看到这一点: 当您使用方括号时,这意味着您正在传递一个可绑定的属性(一个变量)。 <a [routerLink]="routerLinkVariable"></a> 所以这个变量 (routerLinkVariable) 可以在你的类中定义,它应该有一个像下面这样的值: export class myComponent { public routerLinkVariable = "/home"; // the value of the variable is string! 但是有了变量,你就有机会让它变得动态,对吗? export class myComponent { public routerLinkVariable = "/home"; // the value of the variable is string! updateRouterLinkVariable(){ this.routerLinkVariable = '/about'; } 在没有括号的情况下,您只能传递字符串并且无法更改它,它是硬编码的,并且在整个应用程序中都是如此。 <a routerLink="/home"></a> 更新 : 专门为 routerLink
  • 具有功能 RouterLink 的 Angular2 动态 HTML(Angular2 Dynamic HTML with functional RouterLink)
    问题 长期用户,第一次提问! 两天的大部分时间里,我一直试图解决这个问题,但无济于事,所以我们走了。 Angular2 中来自外部源的动态编译模板? 我正在使用 http 从 WordPress API 以 HTML 的形式获取页面内容。 所以我有一个这样的模板: <div [innerHTML]="contentHTML"> </div> “contentHTML”是组件中的一个字符串变量,并通过 API 调用异步分配一个值,如下所示: <a routerLink="/help/faq.html"> </a> 我希望那个 routerLink 工作。 当然,routerLink 可以是任何在模板中有效的东西。 如果以上不可行 如果上述方法不起作用,那么如何解释传入的 HTML 并动态添加 routerLinks 以替换标准的 hrefs 呢? 回答1 我遇到了同样的问题,我遵循了这个答案,但在导入DynamicComponentModule的代码中添加了一个简单的修改,但添加了导入:[RouterModule] 所以步骤如下 install ng-dynamic : npm install --save ng-dynamic 然后使用以下导入和代码: import { DynamicComponentModule } from 'ng-dynamic'; @NgModule({
  • 停用角度路由器链接(Deactivation of angular router link)
    问题 我正在制作角度应用程序,我在其中使用路由和身份验证保护.. 闪电战 应用组件html <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <ul class="nav nav-tabs"> <li role="presentation" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"><a routerLink="/">Home</a></li> <li role="presentation" routerLinkActive="active"><a routerLink="/servers">Servers</a></li> <div *ngIf="showUser"> <li role="presentation" routerLinkActive="active"><a routerLink="/users">Users</a></li> </div> </ul> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8
  • Angular 2 / Leaflet map,如何从标记弹出窗口链接到组件? ... routerLink?(Angular 2 / leaflet map, How to link to a component from marker popup ? … routerLink?)
    问题 在我的 angular 2 应用程序中,我有一个传单地图,其中有一个绑定到 onClick 事件的弹出窗口。 弹出窗口的内容有一个指向角度组件的链接。 但是,当我在 .setContent() 函数中使用 routerLink 时,链接不会显示。 我猜这是因为 .setContent() 无法呈现有意义的 angular 2 指令。 我可以用什么代替? @Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.css'] }) export class MapComponent implements AfterViewInit { openmap: any; constructor() { } ngAfterViewInit() { let openmap = L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}", { attribution: 'terms and feedback' }); let map = L.map("map", { center: [33.2148
  • 如何隐藏导航默认值,点击显示,如何将类添加到图像和 div 角度(How to hide navigation default, show on click, how to add class to image & div angular)
    问题 我正在研究菜单导航。 我有一个菜单图标,我想向它添加类以从主 css 文件控制它。 当页面加载时,我想隐藏导航。 当我点击图标时,我想显示导航。 当我从导航中移出鼠标时,我应该隐藏。 我很困惑如何从哪个文件调用 css,我必须在 app.component.ts 中编写 click 事件或在哪里。 我必须在 angular 4.0 中做所有这些事情。 Thanks in advance. <img src="./assets/menuicon.png" [ngClass]="iconStyle"> <ul class="nav navbar-nav navbar-right" ngHide="Expression"> <!--<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>--> <!--<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>--> <li><a routerLink="one"><img ng-src="images/icon.png" src="{{image}}"></a></li> <li><a routerLink="two">two</a
  • routerLink 无法在角度 2 下工作(routerLink is not working in angular 2)
    问题 页面中的路由没有发生。 我使用了以下 HTML 和配置代码。 <nav aria-label="Page navigation"> <ul class="pagination pagination-plain"> <li> <a href="review/words" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li [routerLinkActive]="['active']"> <a [routerLink]="review/words">1</a> </li> <li [routerLinkActive]="['active']"> <a [routerLink]="review/phrase">2</a> </li> <li> <a href="javascript:void(0)" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> 路由配置代码是 const appRoutes: Routes = [ { path: '', component: IndexComponent, }, { path: 'index', component: IndexComponent,
  • 在Angular中,如何确定活动路线?(In Angular, how do you determine the active route?)
    问题 注意:这里有很多不同的答案,大多数答案一次或一次都有效。 事实是,当Angular团队更改其Router时,有效的方法已经改变了许多次。 最终将成为Angular中的路由器的Router 3.0版本打破了许多这些解决方案,但提供了一个非常简单的解决方案。 从RC.3开始,首选解决方案是使用[routerLinkActive] ,如此答案所示。 在Angular应用程序中(我撰写本文时为2.0.0-beta.0版本中的当前版本),如何确定当前活动的路由是什么? 我正在开发一个使用Bootstrap 4的应用程序,当在<router-output>标记中显示其关联组件时,我需要一种方法来将导航链接/按钮标记为活动状态。 我意识到当单击其中一个按钮时,我可以自己维护状态,但这不会涵盖将多条路径放入同一条路线的情况(例如主导航菜单以及主组件中的本地菜单) )。 任何建议或链接将不胜感激。 谢谢。 回答1 使用新的Angular路由器,您可以向所有链接添加[routerLinkActive]="['your-class-name']"属性: <a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a> 或者,如果只需要一个类,则为简化的非数组格式: <a [routerLink]="['/home']"
  • Angular 4 路由器在 routerLink 导航上附加组件而不是销毁它们(Angular 4 router is appending components on routerLink navigation instead of destroying them)
    问题 当从子模块内从一个子路由导航到另一个同级子路由时,路由器不会破坏前一个组件,而是在向前和向后导航时附加新的组件。 为什么会这样? 从/#/subscriber/lookup ,移动到/#/subscriber/register路由 <a [routerLink]="['../register']">Subscriber register link</a> app.routes.ts /** * Angular 2 decorators and services */ import { Routes } from '@angular/router'; /** * Other services */ import { RouteProtection } from '../services/route-protection.service'; // import { DataResolver } from './app.resolver'; /** * Imported Components */ import { LoginComponent } from '../login/login.component'; import { NotFound404Component } from '../404/notfound404.component'; export const
  • 如何在测试 angular 2 应用程序时正确使用 SharedModules 和路由器?(How to correctly use SharedModules with Router while testing angular 2 application?)
    问题 我正在尝试使用routerLink和routerLinkActive对(角度 2)组件进行单元测试,但所有测试用例都失败并显示以下错误消息。 (注意:我已经存根了路由器和其他相关的依赖项。这是我用于相同的参考。)。 无法读取未定义的属性“订阅” 我还注意到,当从我的模板中删除routerLink和routerLinkActive时,所有测试用例都将运行而不会出现任何错误。 我认为该错误是由RouterTestingModule或SharedModule (包含用于显示和验证密码输入字段的组件)引起的。 所以我尝试删除或添加它们以找出实际导致问题的原因。 这是我观察到的。 如果存在RouterTestingModule或SharedModule我得到“ Cannot read property 'subscribe' of undefined' 。 我不要挂只有当我删除这两个路由器的任何错误RouterTestingModule和SharedModules但从元素SharedModules不至于太装在组件和一些测试情况下仍然不能因为这一点。 测试床配置: TestBed.configureTestingModule({ imports: [CoreModule,SharedModule,RouterTestingModule], declarations: [
  • 在 HTML 字符串中传递有角度的 routerLink URL 的最佳方法(Best way to pass angular routerLink URL's in an HTML string)
    问题 我的 angular 应用程序中有一个通知服务,通常你称之为 this.notificationsService.showError('My Title', 'My Message...'); 我也希望能够在消息中传递应用程序链接,并且我知道我需要允许SafeHtml输入,如下所示: this.notificationsService.showError( 'Error!', this.domSanitizer.bypassSecurityTrustHtml( `Something has gone wrong, but you can go to <a routerLink="'/home/accounts-list'">home page</a> to start over.` ) ); 在我的服务中,这就是我用它做的事情: showError(title: string, message: string | SafeHtml): void { const newNotification: INotification = { title, message, htmlMessage: typeof message !== 'string' }; this.notifications.push(newNotification); } 然后我像这样展示它: <div class
  • 使用 routerLink Angular 传递不可见或隐藏的参数(Pass invisible or hidden parameters using routerLink Angular)
    问题 我有如下路由器链接: <button class="take-a-tour-btn" [routerLink]="['/dashboard', {'showTour':'show'}]"> 我想传递参数showTour 。 但是,当我这样做时,参数在url可见,我想隐藏它。 我已经阅读了很多参考资料(其中提到了可选参数),但在我的案例中没有成功。 我怎么能解决这个问题? 回答1 在 Angular 7 中,您可以使用历史状态将动态数据传递给您要导航到的组件,而无需将它们添加到 URL 中,如下所示: this.router.navigateByUrl('/user', { state: { orderId: 1234 } }); 要么 <a [routerLink]="/user" [state]="{ orderId: 1234 }">Go to user's detail</a> 你可以通过这种方式得到它 constructor() { this.router.events .pipe(filter(e => e instanceof NavigationStart)) .subscribe((e: NavigationStart) => { const navigation = this.router.getCurrentNavigation(); this
  • routerLink 绝对 url(routerLink absolute url)
    问题 从角度文档: 路由器链接指令始终将提供的输入视为当前 url 的增量。 例如,如果当前 url 是/user/(box//aux:team) 。 然后下面的链接<a [routerLink]="['/user/jim']">Jim</a>将生成链接/user/(jim//aux:team) 。 那么如何创建指向/user/jim的链接呢? 我试过['/user/jim', { outlets: { aux: null }}]但这不起作用。 即使它有效,它也不是最佳解决方案。 我宁愿寻找一种导航到绝对网址的方法,而不是取消可能的网点。 编辑: 在同一主题上,我有一个指向根的链接: routerLink="/"就是这样做的,它重定向到我的应用程序的根,没有任何出口,如绝对链接。 有趣的是,我并不特别想要那个特定链接的行为,保持任何出口路线都很好...... 回答1 截至 2018 年 8 月,Angular 文档说: 如果第一段以 / 开头,则路由器将从应用程序的根目录查找路由。 如果第一段以 ./ 开头,或者不以斜杠开头,则路由器将查看当前激活路由的子节点。 如果第一段以 ../ 开头,路由器将上升一级。 回答2 您可以使用相对路径: <a [routerLink]="['./']" 将重定向到您的上层父级 ( /user/jim ) <a [routerLink]="['']
  • 以角度 5 更新 routeparams(Update routeparams in angular 5)
    问题 我有一个像这样的dashboard/tour/2/269的路线,这个组件代表旅游详细信息,在该组件内部有一些引用类似旅游的链接,所以当用户点击这些链接之一时,我想重新加载基于组件的在新的参数上,比如这个dashboard/tour/5/150 ,我尝试使用直接的[routerLink]但它将新参数附加到旧参数上,变得像这个dashboard/tour/2/269/tour/5/150路由无效。 请提出任何建议。 回答1 您将不得不将ActivatedRoute注入到您的组件中。 您的路线必须像这样设置: { path: 'person/:id/:office_id', component: PersonComponent }, 然后订阅参数: constructor(private route: ActivatedRoute) {} ngOnInit() { this.route.params .subscribe(params => { const id = +params['id']; const office = +params['office_id']; console.log(`Current params are person ID ${id} and office ID ${office}`); }); } 您的 routerLink 将是:
  • Angular 2/4 - routerLinkActive 无法正常工作(Angular 2/4 - routerLinkActive not working properly)
    问题 我的 routerLinkActive 有问题。 这里有两个 Gif 来解释。 第一个问题:当我启动应用程序时,没有一个 routerLinkActive 使类处于活动状态。 但是如果我点击不同的路线,那最终会起作用。 当我首先单击当前路线时,不显示课程。 这是我的代码: <ul class="nav"> <li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}"> <a [routerLink]="[menuItem.path]"> <i class="material-icons">{{menuItem.icon}}</i> <p>{{menuItem.title}}</p> </a> </li> </ul> 这是我的路线树。 (红色是被调用的组件) 和我的路线代码: import ... const routes : Routes = [ { path: '', component: HomeComponent, canActivate: [AuthGuard], children: [ { path: 'dashboard', component: DashboardComponent }, ..., { path: 'challenges'