Angular для отправки значения свойства get из родительского в дочерний компонент

Question

У меня есть родительский компонент, который отправит значение дочернему компоненту из свойства get.Значение, отправленное дочернему компоненту, отображается на той же родительской HTML-странице, но недоступно для дочернего компонента.

Попробовано с использованием нового метода, пробовал весь жизненный цикл, чтобы извлечь значение из родительского компонента, ничего не помоглоТакже я пытался использовать Viewchild в некоторой степени, но ни то, ни другое не помогло мне получить значение.

parent.component.ts

get name(): string {
 return this.service.name.toLocaleLowerCase(); // returns the name Eg: Tom
}

parent.component.html

<child [name]="name"></child>
name::: {{name}} <!--display name as Tom in the parent HTML-->

child.component.ts

@Input() name: string;
 constructor() {
  console.log(name); // logs unknown
}

Приведенный выше файл console.log отображается как неизвестный

Я пытался console.log в методе ngOnInit - он отображает неизвестный, я пытался с помощью ngOnChanges (изменения: SimpleChanges) - но по какой-то причине значение печатается не в первый раз, а во второй раз, что бесполезно.Может кто-нибудь предложить, пожалуйста?

Мне нужно получить входное значение внутри метода contructor.

Answer 1

Нам нужно получить доступ к значению @Input, используя ключевое слово this

.

@Input() name: string;
 constructor() {
  console.log(this.name); //value passed from parent to the child
}

Answer 2

1. Вы должны использовать хук жизненного цикла , в котором установлены входы. Например ngOnChanges или ngOnInit

2. Чтобы получить доступ к переменной-члену (классу) в javascript / typcript, вы должны квалифицировать ее как this.

  @Input() name: string;

  ngOnInit() {
    console.log(this.name); // logs unknown
  }

Answer 3

Я думаю, что ваш дочерний компонент загружен до того, как значение переменной name службы инициализировано. проверьте, что значение службы уже инициализировано, и после этого загрузите ваш дочерний компонент.

попробуйте с

<child [name]="name" *ngIf="this.service.name"></child>