【发布时间】：2018-05-27 17:54:41
【问题描述】：
我正在尝试新的 AngularElements 功能。 (https://angular.io/guide/elements)
第一次测试是成功的，但是一旦我集成了@ContentChildren，它就会停止工作。这对我来说似乎是合乎逻辑的，因为作为 CustomElement 的新创建的组件无法通过 Angular-Context 获取引用，因为它位于应用程序之外。
我的目标是制作一个最小的 Tab-Wrapper / Tab - 类似于 angular.io 中使用的组件结构
<custom-tab-wrapper>
<anb-tab [title]="'Test'">
Content
</anb-tab>
</custom-tab-wrapper>
我还创建了一个 Stackblitz，但这似乎更糟，因为 HMR 多次定义组件，这会导致错误。但这应该让您更好地了解我想要实现的目标。
https://stackblitz.com/edit/angular-byvpdz?file=src%2Fapp%2Ftab-wrapper%2Ftab-wrapper.component.ts
这里是主要文件：
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularBlog</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<anb-root></anb-root>
<custom-tab-wrapper>
<anb-tab [title]="'Test'">
Content
</anb-tab>
</custom-tab-wrapper>
</body>
</html>
tab-wrapper.component.ts
import {AfterContentInit, Component, ContentChildren, OnInit, QueryList, ViewEncapsulation} from '@angular/core';
import {TabComponent} from '../tab/tab.component';
import {AfterContentInit, Component, ContentChildren, OnInit, QueryList, ViewEncapsulation} from '@angular/core';
import {TabComponent} from '../tab/tab.component';
@Component({
selector: 'anb-tab-wrapper',
template: `
<div class="tab-selection-wrapper">
<h1>Test</h1>
<div class="tab-selection" (click)="enableTab(tab)" *ngFor="let tab of tabs.toArray()">
{{tab.title}}
</div>
</div>
<div class="tab-content">
<ng-content></ng-content>
</div>
`,
encapsulation: ViewEncapsulation.Native
})
export class TabWrapperComponent implements OnInit, AfterContentInit {
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
constructor() {
setInterval(() => {
console.log(this.tabs);
}, 2000);
}
public enableTab(tab: TabComponent) {
tab.active = true;
this.tabs.toArray().forEach(tabToCheck => {
if (tab !== tabToCheck) {
tabToCheck.active = false;
}
});
}
ngAfterContentInit(): void {
}
ngOnInit() {
}
}
然后我会有一个选项卡组件。如果我在 angular-root-element 中使用它而不是作为 WebComponent 使用它，它会正确呈现。
app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {Injector, NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {TabWrapperComponent} from './tab-wrapper/tab-wrapper.component';
import {TabComponent} from './tab/tab.component';
import {createCustomElement} from '@angular/elements';
@NgModule({
declarations: [
AppComponent,
TabWrapperComponent,
TabComponent
],
entryComponents: [
TabWrapperComponent,
TabComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(private injector: Injector) {
const tabWrapper = createCustomElement(TabWrapperComponent, {injector: injector});
customElements.define('custom-tab-wrapper', tabWrapper);
const tabComponent = createCustomElement(TabComponent, {injector: injector});
customElements.define('anb-tab', tabComponent);
}
}
我知道我可以在没有 @ContentChildren 的情况下解决此问题，但我想在 CustomComponent 中使用此功能。 所以我的问题是：是否可以使用@ContentChildren / ViewChildren。 如果不是，有什么替代方案？
感谢您的帮助
丹尼尔
【问题讨论】：
标签： angular web-component angular6