输入值不传递给子组件angular5?

时间:2018-01-28 12:13:13

标签: angular typescript angular5

我有两个组件仪表板&技能,我想传递仪表板中的类型以用于技能。但是未定义错误。

仪表板组件:

export class DashboardComponent implements OnInit {
  type: string;
  constructor() { }

  ngOnInit() {
    this.type = "Agent";
  }

技能组件是:

export class SkillComponent implements OnInit{
 @Input() type: string;  
 constructor() { }
  ngOnInit() {
  console.log(this.type);
}

仪表板组件模板:

<div class="container">
  <div class="row">
    <app-skill-list type="type"></app-skill-list>
  </div>
</div>

2 个答案:

答案 0 :(得分:1)

您需要使用注释 [type]

<app-skill-list [type]="type"></app-skill-list>

答案 1 :(得分:1)

您可以通过queryParams将组件的一个变量的值传递给其他组件。

使用[queryParams]指令和routerLink传递queryParams。

Dashboard.html

<a [routerLink] = "['/skill']" [queryParams] ="{type :[type] }">

Skill.ts

data :any;
type : any;



Export class Skill implements OnInit {

constructor(private route: ActivatedRoute)

ngOnInit (){ 


this.data = this.route
                . queryParams
                . subscribe (params =>{
                   this.type = params['type']

                      })
//Now you can console it in skill component
}
}