Входное значение не передается дочернему компоненту angular5?

У меня есть панель инструментов и навыки с двумя компонентами, и я хочу передать тип панели инструментов для использования в навыках. Но получаю ошибку undefined.

Компонент приборной панели:

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>

typescript angular angular5
person aspnetcore 2.0    schedule 28.01.2018    source источник
comment
Он не должен быть неопределенным, это будет 'type', но если вы хотите передать значение this.type = "Agent" дочернему компоненту, используйте привязку атрибута [type]="type"... Вопрос SkillComponent является app-skill-list компонентом? если нет, то соответствующий компонент имеет привязку type @Input?   -  person Pankaj Parkar    schedule 28.01.2018

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно использовать аннотацию [type]

<app-skill-list [type]="type"></app-skill-list>
person Sajeetharan    schedule 28.01.2018

arrow_upward
1
arrow_downward

Вы можете передать значение одной переменной компонента другому компоненту с помощью 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
}
}
person Zoha Irshad    schedule 28.01.2018