Угловое 2 Входное связывание не работает

Question

index.html:

<app [myname]="some_name"></app> 

app.component.ts:

import {Component, Input, Output} from '@angular/core'; 

    @Component({ 
    selector: 'app', 
    template: '<span>{{myname}}</span>' 
    }) 

    export class CupBuyComponent { 
     @Input() myname: String; 

     constructor(){ 
      console.log(this.myname); 
     } 
    } 

JS консоль говорит неопределенными. Как я могу получить переменные из .html-файла, чтобы отправить его компоненту?

Answer 1

Update

Причина, почему это не работает в том, что ваш index.html, в котором вы устанавливаете не угловая компонента. Из-за этого Angular не будет компилировать этот элемент. И Угловая не считывает значения атрибутов во время выполнения, только во время время компиляции, так как в противном случае мы получили бы удар производительности.

https://github.com/angular/angular/issues/1858#issuecomment-151326461

Это будет делать то, что вы хотите:

index.html

<app myname="some_name"></app> 

Корневой компонент

export class CupBuyComponent { 
    @Input() myname: String; 

    constructor(elm: ElementRef){ 
    this.myname = elm.nativeElement.getAttribute('myname'); 
    } 
} 

Кроме того, если вы хотите передать данные в качестве объекта вы можете посмотреть на этот вопрос

• Passing server parameters to ngModule after RC5 upgrade

---

Оригинальное

Если вы хотите передать данные в виде текста то это должно быть

<app [myname]="'some_name'"></app> 

или

<app myname="some_name"></app> 

Answer 2

ВАЖНО

Я объяснил ниже того, что случилось с вашим обязательным, но даже если вы используете код, который я условии, что она не будет работать, потому что вы пытаетесь передать вход в компонент, который вы загружаете (корневой компонент), что невозможно.

Если вы хотите передать строку some_name к myname входной переменной, вы должны к нему без []:

<app myname="some_name"></app> 

Если вы делаете это с [], как вы делали, он ищет переменную с именем some_name в вашем который у вас нет, и поэтому вы получаете undefined в своей консоли.

Answer 3

Его доступны в и после этого события:

ngOnInit() { ... here ... }

и как другие уже упоминалось .. если вы используете синтаксис [myname]="variable or expression()", внутри «» должны быть переменной или выражением ваш компонент ..

Если вы используете этот синтаксис myname="anyStringHere" вы можете вставить только строка там ..