我有几个分离的Web组件，它们由角元素构成，我将其导入到一个主要的组件中，该组件具有路由器，是基础应用程序。路线非常简单：
import { Component } from '@angular/core';
import { Router } from "@angular/router";
@Component({
selector: 'example',
template: '<component-one [variable]="toPass" (callback)="onCallback($event)"></component-one>',
styles: []
})
export class ExampleComponent {
public toPass: string = "Hello World!";
constructor(private router: Router) {}
onCallback(event) {
console.log(event);
this.router.navigate(['example-two']);
}
}
组件可以执行应做的事情。
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: "component-one",
templateUrl: "./component-one.html",
styleUrls: ["./component-one.scss"],
encapsulation: ViewEncapsulation.Emulated,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ComponentOne implements OnInit {
@Input() variable: string;
@Output() callback = new EventEmitter<any>();
constructor() {} …假设我将使用 nx 能够在单一存储库中的不同站点之间共享库。我有两个网站：
站点 1 有一个 helloWorld Angular 组件。在站点 2 上，我想使用 helloWorld 组件，但作为由 Angular 元素创建的 Web 组件。所有 Angular 组件和元素都应存储在共享的外部 nx 库中。
有没有办法在常规 Angular 组件和 Angular 元素之间共享代码？或者，将常规组件嵌套在元素内？
我有以下问题.我有一个使用Angular 6和路由系统构建的应用程序.我想创建一个包含此应用程序的Web组件,并能够将其用作不同Web应用程序的一部分.我已按照本教程操作,并根据自己的需要对其进行了修改:https://codingthesmartway.com/angular-elements-a-practical-introduction-to-web-components-with-angular-6/
结果是屏幕上没有任何渲染,现在浏览器中存在错误Error: The selector "app-root" did not match any elements.
在浏览器源文件上,我可以确认包含我的Web组件的js文件已成功加载.
这是我有的:
在app.module.ts中
@NgModule({
declarations: [
AppComponent,
VideoRoomComponent,
DashboardComponent,
StreamComponent,
DialogNicknameComponent,
ChatComponent,
DialogExtensionComponent,
],
imports: [
FormsModule,
ReactiveFormsModule,
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatCardModule,
MatToolbarModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatDialogModule,
MatTooltipModule,
AppRoutingModule,
HttpClientModule,
],
entryComponents: [
AppComponent,
DialogNicknameComponent,
DialogExtensionComponent,
],
providers: [{provide: APP_BASE_HREF, useValue: '/'}, MyService],
bootstrap: [AppComponent],
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const el = createCustomElement(AppComponent, { injector: this.injector }); …是否可以注销由createCustomElement创建的自定义元素？
我们使用Web组件包装垂直功能，在将Web组件添加到DOM之前，先下载功能的所有“部分”。
我们真正想要的是在该功能不再活动但看上去好像没有可用的API时完全销毁该组件。
有人有运气吗？
我已经创建并导出了一个Angular Element（Angular中的Web组件）作为单个脚本标签（user-poll.js）。要使用此Angular元素，我只需要在宿主站点中指定以下两行：
<user-poll></user-poll>
<script src="path/to/user-poll.js"></script>
我有以下要求：
我有以下问题：
<body>
</body>
setTimeout(() => {
loadJS();
}, 2000);
function loadJS() {
var elm = document.createElement("div");
elm.attachShadow({mode: "open"});
elm.shadowRoot.innerHTML = `<user-poll><h2>Custom Web Component - user-poll loaded</h2><script src="https://cdn.rawgit.com/SaurabhLpRocks/795f67f8dc9652e5f119bd6060b58265/raw/d5490627b623f09c84cfecbd3d2bb8e09c743ed4/user-poll.js"><\/\script></user-poll>`;
document.body.appendChild(elm);
}
那么，在站点上动态加载多个Angular Elements的最佳方法是什么？
javascript web-component shadow-dom angular angular-elements
我正在开发一个递归查询构建器形式，它与 Angular 7中的反应形式类似。表示用户可以通过点击 继续添加并行规则Add rule，也可以通过点击 添加分组Add group。我创建了两个组件，QueryDesignerComponent并且QueryComponent. QueryDesignerComponent保存外部容器，带有AND和OR条件，并QueryComponent保存行输入，即LHS,operator和RHS。
Add rule再推送一个条目即可增长规则。我用 重复这一点。QueryComponentQueryDesignerComponent*ngForAdd group我正在调用QueryDesignerComponentinside QueryComponent，这使得它递归。我用 重复这一点*ngFor。我已经完成了实现，并且它在有角度环境的角度应用程序中运行良好。
现在，我正在尝试将此流程移植到Angular elements中，以使其可重用，无论环境如何。
这就是我将第一行 [ QueryComponent] 放在里面的方式QueryDesignerComponent，
<div class="qd--criteria">
<div class="row qd--body qd--clear-margin-lr">
<div class="col-md-12 qd--condition-container">
<query [data]="data" [operators]="operators" [(queryForm)]="queryForm"></query>
</div>
</div>
</div>这样我就可以管理内部的并行查询和组 …