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

Question

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

仪表板组件：

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>

Answer 1

你需要使用注释[type]

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

Answer 2

您可以通过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
}
}