Angular @Input不适用于引导程序组件 [英] Angular @Input is not working with bootstrap component
问题描述
我在Angular2类中犯了一个错误,并且对 @Input 不清楚.
I did a mistake in my Angular2 class and I've not clearly understood about @Input.
我创建了两个组件AppComponent和AppDetailComponent.
I created 2 components AppComponent and AppDetailComponent.
在AppDetailComponent中:
In AppDetailComponent :
import { Component, Input } from '@angular/core';
@Component ({
selector: 'app-detail',
template: 'Hi {{datainput}}'
})
export class AppDetailComponent {
@Input()
datainput: string;
}
并在AppComponent模板中:
and in AppComponent template :
<h1>
{{title}}
</h1>
<app-detail [datainput]="'test'"></app-detail>
在App Module中,我通过添加AppDetailComponent作为引导程序组件而犯了一个错误
and in App Module I made a mistake by add AppDetailComponent as bootstrap component
import { AppComponent } from './app.component';
import { AppDetailComponent } from './app-detail.component';
@NgModule({
declarations: [
AppComponent, AppDetailComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent, AppDetailComponent]
})
export class AppModule { }
从引导列表中删除AppDetailComponent后,程序运行正常.
After I removed AppDetailComponent from the bootstrap list, program was working correctly.
我不明白 将@input用作引导程序组件时,为什么@input不能正常工作?
I don't understand why @input dose not working when I use it as bootstrap component?
尽管我从其他角度组件发送输入,但Angular会始终忽略输入属性吗?
Will Angular always ignore input property in spite of I send the input from an other angular component?
推荐答案
@Inputs()
只能绑定在组件的模板中.自举组件位于任何其他组件之外的index.html
中,因此无法绑定到输入.
@Inputs()
can only be bound in templates of a component. Bootstrapped component are in index.html
outside of any other component and therefore there it's not possible to bind to inputs.
另请参见 Angular 2外部输入
如果index.html
中没有匹配的选择器,并且不想将某个组件用作根组件,则不要将其添加到bootstrap: [...]
If you don't have a matching selector in index.html
and don't want to use a component as root component, then don't add it to bootstrap: [...]
这篇关于Angular @Input不适用于引导程序组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!