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?;

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

父组件中的Angular Elements @Input（）绑定

0 个答案: