angular - Angular Elements @Input() 绑定在父组件中

Question

我被一个我无法解决的问题困了几个小时。我创建了一个组件并将其捆绑为一个 js 文件。我想将此 js 文件加载到另一个项目中。到目前为止，一切都很好。但是我用 @Input() 装饰器创建了一个组件。现在，当我在另一个项目的 html 中添加我的自定义组件并直接传递 @Input() 属性时，仍然一切正常。但我希望这个属性不直接在 html 文件中传递，我想将它绑定到这个组件中。说得够多了，让我们一步一步来看看我到目前为止的情况

已安装的库和依赖项

npm i @angular/elements @webcomponents/custom-elements fs-extra concat --save

导入的脚本

"scripts":
[
"node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"node_modules/@webcomponents/custom-elements/src/native-shim.js"
]

创建的组件

打字稿文件

@Component({
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  @Input() subtitle: string;
}

html文件

<h1>Any Title<h1/>
<h4>{{subtitle}}</h4>

将组件注册到AppModule.ts

export class AppModule {constructor(private injector: Injector) {  }

ngDoBootstrap() {
  const widgetName = createCustomElement(AppComponent, {injector: this.injector});
  customElements.define('widget-name', widgetName);
}

现在我可以在 index.html 中添加这个自定义组件，ng serve并且一切正常。

我有一个构建脚本，它将我的组件捆绑到一个 js 文件中。这对这段代码非常有效。这是我添加到另一个项目的内容。

工作示例

<widget-name subtitle="Subtitle of this cmp"></widget-name>

不工作的例子

<widget-name [subtitle]="subtitle"></widget-name>

在相应的打字稿文件中，我添加了一个简单的属性，希望它将与subtitle@Input() 属性绑定。

subtitle = 'Why it's not working?;

我也尝试过不同的绑定，但是当我在不同的项目中添加自定义组件时，绑定源似乎丢失了。

标签： angulartypescriptweb-componentangular-elements