gpt4 book ai didi

Angular @Input 不适用于 Bootstrap 组件

转载 作者:行者123 更新时间:2023-12-05 06:40:31 29 4
gpt4 key购买 nike

我在 Angular2 类中犯了一个错误,我没有清楚地理解 @Input

我创建了 2 个组件 AppComponent 和 AppDetailComponent。

在 AppDetailComponent 中:

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


@Component ({
selector: 'app-detail',
template: 'Hi {{datainput}}'
})

export class AppDetailComponent {

@Input()
datainput: string;

}

在 AppComponent 模板中:

<h1>
{{title}}
</h1>
<app-detail [datainput]="'test'"></app-detail>

在 App Module 中,我犯了一个错误,将 AppDetailComponent 添加为引导组件

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 { }

从 Bootstrap 列表中删除 AppDetailComponent 后,程序正常运行。

我不明白当我将它用作 Bootstrap 组件时,为什么 @input 不起作用?

尽管我从其他 Angular 组件发送输入,Angular 是否总是忽略输入属性?

最佳答案

@Inputs() 只能绑定(bind)在组件的模板中。自举组件位于任何其他组件之外的 index.html 中,因此无法绑定(bind)到输入。

另见 Angular 2 external inputs

如果您在 index.html 中没有匹配的选择器并且不想将某个组件用作根组件,则不要将其添加到 bootstrap: [. ..]

关于Angular @Input 不适用于 Bootstrap 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42412603/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com