Angular 父组件中的角度元素@Input（）绑定

我被一个无法解决的问题困扰了好几个小时。我已经创建了一个组件，并将其打包为一个js文件。我想把这个js文件加载到另一个项目中。到目前为止，一切都很顺利。但是我创建了一个带有@Input（）装饰器的组件。现在，当我在另一个项目的html中添加自定义组件并直接传递@Input（）属性时，一切仍然正常。但是我不想让这个属性直接在html文件中传递，我想把它绑定到这个组件中。说得够多了，让我们一步一步地看看我到目前为止都做了些什么

已安装的库和依赖项

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

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>

现在，我可以在index.html和

ngserve

中添加这个自定义组件，一切正常

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

工作示例

不起作用示例

在相应的typescript文件中，我添加了一个简单的属性，希望它与

subtitle

@Input（）属性绑定

subtitle = 'Why it's not working?;

---

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

尝试我已经尝试过了，但它不起作用。这看起来像一个bug，因为当我在该组件中绑定另一个元素时，一切都按预期工作。找到解决方案后，我必须“更早”导入.js脚本。我已经将它添加到index.html，现在一切都正常了。。我不得不从polyfills.ts中删除zone.js，因为控制台说我已经多次导入了它。也许我会考虑一种不使用zone.js创建组件的方法。。。