输入值没有传递给子组件angular5？答案

【问题标题】：Input value is not passed to child component angular5?输入值没有传递给子组件angular5？
【发布时间】：2018-01-28 21:38:14
【问题描述】：

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

仪表板组件：

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>

【问题讨论】：

它不应该是未定义的，应该是'type'，但是如果你想将this.type = "Agent"值传递给子组件使用属性绑定[type]="type"... 问题是SkillComponent 是app-skill-list 组件吗？如果没有，那么各个组件有type@Input 绑定？

标签： angular typescript angular5

【解决方案1】：

你需要使用注解[type]

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

【讨论】：

【解决方案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
}
}

【讨论】：