3

我正在尝试将我的自定义组件标签放在一个字符串数组中，并在通过调用 bypassSecurityTrustHtml 对它们进行清理之后通过 ngfor 将它们绑定到 innerhtml 属性......不幸的是，输出始终为空，但也没有清理错误......

我究竟做错了什么？

// adminpanel.component.ts
@Component({
    selector: 'admin-panel',
    templateUrl: './adminpanel.component.html'
})
export class AdminPanelComponent {

    static GetRoutes(): Route[] {
        return [
            { path: '', redirectTo: 'news', pathMatch: 'full' },

        // 0
            { path: 'news', component: AdminNewsViewComponent },
        // 1
            { path: 'users', component: AdminUsersViewComponent },
        // 2
            { path: 'roles', component: AdminRolesViewComponent },
        // 3
            {
                path: 'culturesettings',
                redirectTo: 'culturesettings/wordvariables'
            },
            {
                path: 'culturesettings', 
                component: AdminCultureSettingsViewComponent,
                pathMatch: 'prefix',
                children: AdminCultureSettingsViewComponent.GetRoutes()
            },
        // 4
            {
                path: 'account',
                component: AdminAccountViewComponent
            }
        ]
    }

    panels: AdminPanel[] = [];

    routedTabs: RoutedTabs

    constructor(private authService: AuthService, private routerService: RouterService, private sanitizer: DomSanitizer) {
        this.routedTabs = new RoutedTabs("admin/panel", 2, authService, routerService);

        var routes = AdminPanelComponent.GetRoutes().filter(x => x.component != undefined);
        var comps = [
            '<admin-news-view></admin-news-view>',
            '<admin-users-view></admin-users-view>',
            '<admin-roles-view></admin-roles-view>',
            '<admin-culture-settings-view></admin-culture-settings-view>',
            '<admin-account-view></admin-account-view>'
        ];
        for (var i = 0; i < comps.length; i++) this.panels.push(new AdminPanel(i, routes[i], this.sanitizer.bypassSecurityTrustHtml(comps[i])  , this.sanitizer));

    }

    ngOnInit() {

        this.routedTabs.MakeTabs(AdminPanelComponent.GetRoutes());
        this.routedTabs.Subscribe();
        this.routedTabs.Emit();
    }
    ngOnDestroy() {
        this.routedTabs.Unsubscribe()
    }
}
class AdminPanel {
    index: number;
    route: Route;
    innerHtml: any = '';
    constructor(index: number, route: Route, innerHtml: any, private sanitizer: DomSanitizer) {
        this.index = index;
        this.route = route;
        this.innerHtml = innerHtml;

    }
}

在我的 adminpanel.component.html 中：

<mat-tab-group (selectedTabChange)="routedTabs.onTabChange($event)" [(selectedIndex)]="routedTabs.selectedTab">
    <mat-tab *ngFor="let panel of panels" label="{{ routedTabs.tabs[panel.index].label }}">
        <div [innerHTML]="panel.innerHtml">

        </div>
    </mat-tab>
</mat-tab-group>
4

2 回答 2

2

据我所知，这并没有真正以令人满意或干净的方式解决。我一直在同一条船上，也没有找到在动态字符串中加载组件的好解决方案 - 所以我用ngx-dynamic-hooks编写了自己的！

您可能感兴趣的一些关键点：

  • 查找字符串中的所有组件选择器并自动将相应的组件加载到它们的位置
  • 如果您需要的话，甚至可以通过其他文本模式而不是其选择器来加载组件
  • 输入和输出可以像在普通模板中一样设置，并自动为您从字符串解析为实际变量
  • 组件可以不受限制地嵌套，并且将按预期出现在彼此的“ng-content”-slots中
  • 您可以将来自父组件的实时数据传递到动态加载的组件中（甚至可以使用它来绑定内容字符串中的输入/输出）
  • 您可以精确控制允许在出口到出口的基础上加载哪些组件，甚至可以为它们提供哪些输入/输出
  • 您可以选择将组件配置为仅在需要时才延迟加载
  • 该库使用 Angular 的内置 DOMSanitizer，即使输入可能不安全也可以安全使用

这些组件是使用原生 Angular 方法创建的，其行为与您应用程序中的任何其他组件一样。我希望这可以帮助所有遇到同样问题的人。

在此 Stackblitz 中查看它的实际效果。

于 2020-08-26T05:57:20.390 回答
0

仅将标签用作字符串是行不通的，因为如果在 dom 中弹出具有匹配选择器的元素，则 angular 不仅会创建组件实例。

你要么

  1. 使用ComponentFactoryResolver
  2. 只需在面板上有一个 type 属性，因此您可以ngSwitch根据 type 使用并在ngSwitchCase. 在这种情况下，您的模板中会有标签
于 2018-07-13T14:11:35.197 回答