角度6：为什么子组件模板渲染两次？
Sam*_*ary 6 javascript web-component angular
我有两个Angular组件app-image-input和app-button。我将模板中的app-button用于app-image-input，如下所示。
AppButtonComponent
appButton.html
<button type="button" (click)="buttonClicked.emit()">{{label}}</button>
appButton.ts
@Component({
selector: 'app-button',
templateUrl: './appButton.html'
})
export class AppButtonComponent {
@Input()
label : string
@Input()
enabled : boolean
@Output()
buttonClicked = new EventEmitter()
}
AppImageInputComponent
appImageInput.html
<div class="take-photo">
<span>Photo</span><input type="file" accept="image/*" capture>
</div>
<hr class="hr">
<div class="inner">
<app-button class="submit" label="Submit" (buttonClicked)="submitClk()"></app-button>
<app-button label="Cancel" (buttonClicked)="cancelClk()"></app-button>
</div>
应用模块
app.module.ts
// ..... imports go here.
@NgModule({
declarations: [AppButtonComponent, AppImageInputComponent],
entryComponents: [AppButtonComponent, AppImageInputComponent],
imports: [
FormsModule,
BrowserModule,
],
providers: [],
bootstrap: []
})
export class AppModule {
ngDoBootstrap() {
}
constructor(injector: Injector) {
Array.from(new Map<Type<any>, string>([
[AppButtonComponent, 'app-button'],
[AppImageInputComponent, 'app-image-input'],
]), ([key, value]) => {
customElements.define(value, createCustomElement(key, {injector}))
})
}
}
问题 我将我的应用程序打包为角度元素，并在原始HTML / JS应用程序中使用。我遇到的怪异行为与我使用图像输入组件的方式有关。
如果执行以下操作，则会得到预期的图像组件。
<body>
<app-image-input></app-image-input>
</body>
</html>
但是，当我执行以下操作时，按钮会重复。
<body>
<script>
setTimeout(() => {
var elem = document.createElement("app-image-input");
document.body.appendChild(elem);
}, 1000);
</script>
</body>
</html>
请注意，将超时设置为大约400（而不是1000）毫秒可以提供正确的输出！
您可以在此处找到完整的项目。
如上所述，它呈现为 Angular 组件，也呈现为 Web 组件。因此，你会看到它两次。只需使用与应用程序的选择器不匹配的自定义元素名称，以便您可以决定是否渲染自定义元素版本或 Angular 组件版本。