Question

美好的一天，

有人能告诉我在路由组件上绑定属性的替代方法是什么？似乎@input（）装饰器没有处理路由组件。

由于

Answer 1

尝试使用路由器参数。因此，在您的路由器配置中，拥有您的组件的路由器路径（被视为＆＃34; MyComponent＆＃34;），就像这样;

routes: Routes = [ { path: 'mycomponent/:myParam', component: MyComponent} ]。

并将实际值传递给HTML中的锚标记中的路由器，如;

<a [routerLink]="['/mycomponent', paramValue]"> Link to MyComponent </a>

或在您的父组件中，以编程方式导航到MyComponent;

this.router.navigate(['/mycomponent', paramValue]);

在组件（MyComponent）中，从angular路由器导入ActivatedRoute，它提供 params Observable，并在ngOnInit方法中订阅该observable。所以你的 MyComponent 看起来应该是这样的;

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'my-selector',
  template: '<div>My Component - Param Value {{myParamValue}}</div> '
})

export class MyComponent implements OnInit, OnDestroy{
 myParamValue: any;
 private subscribe: any;

constructor(private route: ActivatedRoute){}

ngOnInit() {
    this.subscribe= this.route.params.subscribe(params => {
       this.myParamValue = params['myParam'];
    });
  } 

ngOnDestroy() {
    this.subscribe.unsubscribe();
  }
}

阅读更多here

角2 |无法在路由组件上使用属性绑定

1 个答案: