Angular 6 在 AngularElements 中使用 ContentChildren/ViewChildren - CustomComponents

Question

我正在尝试新的 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

以下是主要文件：

索引.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。 如果不是，有哪些替代方案？

谢谢你的帮助

丹尼尔

Answer 1

Rob Wolmald回答了我的问题，我将其作为 Twitter 消息发送给了他。 我想与社区分享结果：

他回答了 Directives 和 ContentChild / ContentChildren 是否按以下方式工作的问题：

不，他们没有 - 在当前的视图引擎中查询是静态的。 通常，因为您可能会投影普通 DOM 节点或其他（Angular）自定义元素，所以您可以只使用 querySelector(All)

这基本上意味着我们可以使用 document.querySelector() 在 angular-livecyclce 内或外部选择孩子。 在我个人看来，在 Angular 之外获取它似乎是更简洁的方法，因为不会使用几行额外的行，但仍会在 angular 应用程序中执行。 我会做一些研究。

可以在此处找到有关此主题的进一步讨论和可能的解决方法： https : //twitter.com/robwormald/status/1005613409486848000

他继续：

您可以将其与https://developer.mozilla.org/en-US/docs/Web/Events/slotchange结合使用……以近似相同的行为

并以将来可能更清洁的解决方案结束：

在 ivy（v7 或之后不久）中，我们可能会使查询系统更加灵活和动态

将在不久的将来使用 querySelectorAll 更新我的解决方案。

Angular 6 在 AngularElements 中使用 ContentChildren/ViewChildren - CustomComponents

问题描述

1 个解决方案

解决方案1
4 已采纳 2018-06-18 09:12:40

Angular 6 在 AngularElements 中使用 ContentChildren/ViewChildren - CustomComponents

问题描述

1 个解决方案

解决方案1 4 已采纳 2018-06-18 09:12:40

解决方案1
4 已采纳 2018-06-18 09:12:40