Javascript 通过routerLink角度路由器模板表达式传递数据？

围绕stackblitz的起点，我添加了以下路由：

    const routes : Routes = [ {path: 'hello', 'component': HelloComponent}];


    @NgModule({
      imports:      [ 
        RouterModule.forRoot(routes, {enableTracing: true}) ],
      declarations: [ AppComponent, HelloComponent ],
    })

还将

添加到

app component.html

模板中，单击以下链接时会呈现

hello组件

：

<a routerLink="hello" routerLinkActive="active">hello</a>

@Input() name: string;

是否有方法通过模板表达式传递值，以便在组件上设置name属性，并在

hello组件中计算。单击ts

的模板字符串和

hello

锚定

仅供参考，hello组件如下所示：

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

    @Component({
      selector: 'hello',
      template: `<h1>Hello {{name}}!</h1>`,
      styles: [`h1 { font-family: Lato; }`]
    })
    export class HelloComponent  {
      @Input() name: string;
    }

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“你好”，
模板：`Hello{{name}}！`，
样式：[`h1{font-family:Lato；}`]
})
导出类HelloComponent{
@Input（）名称：string；
}

---

似乎必须检查

ActivatedRoute

实例的属性才能使其工作？

首先，修改路由定义以允许使用路径参数，如下所示：

const routes : Routes = [ 
  {path: 'crisis-center', 'component': HelloComponent}, 
  {path: 'hello/:name', 'component': HelloComponent}, 
  {path: '**', 'component': HelloComponent}
];

export class HelloComponent  {
  @Input() name: string;

  constructor(private route: ActivatedRoute) {

  }

  ngOnInit(){
    this.route.paramMap.subscribe( params =>
        this.name = params.get('name')
    )
  }
}

<a [routerLink]="['hello', routeOneName]" routerLinkActive="active">hello</a>

这将允许您向

/hello

路由传递

名称

参数

要在组件中访问它，您需要订阅参数更改，如下所示：

const routes : Routes = [ 
  {path: 'crisis-center', 'component': HelloComponent}, 
  {path: 'hello/:name', 'component': HelloComponent}, 
  {path: '**', 'component': HelloComponent}
];

export class HelloComponent  {
  @Input() name: string;

  constructor(private route: ActivatedRoute) {

  }

  ngOnInit(){
    this.route.paramMap.subscribe( params =>
        this.name = params.get('name')
    )
  }
}

<a [routerLink]="['hello', routeOneName]" routerLinkActive="active">hello</a>

最后，您可以通过

routerLink

传入一个值，如下所示：

const routes : Routes = [ 
  {path: 'crisis-center', 'component': HelloComponent}, 
  {path: 'hello/:name', 'component': HelloComponent}, 
  {path: '**', 'component': HelloComponent}
];

export class HelloComponent  {
  @Input() name: string;

  constructor(private route: ActivatedRoute) {

  }

  ngOnInit(){
    this.route.paramMap.subscribe( params =>
        this.name = params.get('name')
    )
  }
}

<a [routerLink]="['hello', routeOneName]" routerLinkActive="active">hello</a>

---

如果您想查看
您想在哪里设置值？在routes数组中，还是要将URL中的值作为URL参数传递？目前，我看不出在动态表达式中路由器链接的哪个位置传递任何值。。。。因此，与其使用routerLink=“hello”。。。routerLink=“此处的动态表达式…”好的，请将链接添加到stackblitz中好吗？谢谢，请注意routerLink周围有[]。这是因为我们分配的是数组而不是像“hello”@Ole这样的字符串，
[routerLink]
周围的括号告诉Angular，
=
后面的位应该被视为代码，而不仅仅是字符串。
['hello'，routeOneName]
周围的括号是因为这是一个数组，其中第一个元素是路径，第二个元素是要传递的值。如果我们排除了
[routerLink]
周围的括号，这将不再被视为一个数组，只是一个字符串。出于某种原因，这对我来说是行不通的。esp将一些值作为json传递。我尝试的代码是：[routerLink]=“['/pages/somepage'，{somekey1:1234，key2:12345}”