Question

我们希望使用Angular2开发实时站点管理应用程序，用户可以在其中更改网站外观。该应用程序可以在站点顶部使用我们的REST API。

网站的HTML由PHP引擎呈现。在HTML中，我们有一些带有类属性class="my-container-2"的元素。

在Angular2应用程序中，我们希望检测这些元素并根据它们进行正确的API调用。

不幸的是，似乎存在问题。一旦我们添加了Angular2组件并将其放入已经呈现的HTML中，它就会删除里面的所有HTML标记：

<body>
<!-- ... -->
<live-management>
    <div class="my-container-2"></div> <-- this tag is removed by Angular2
</live-management>
<!-- ... -->
</body>

看起来只有一种方法可以直接在Angular2组件中提供HTML模板/模板URL。我可以理解这是出于安全原因并且我尊重它，尽管它不适用于我们的用例。

我们考虑降级到Angular 1，因为我所描述的可以使用旧版Angular轻松完成。但另一方面，我们想要采用现代框架。

对此有何想法和建议？也许已经有某种解决方案了吗？

Answer 1

嗯，这有两个部分：渲染php生成的html，并查询html类名。

第一个可以使用<ng-content>或<template> ... Transclusion来解决;

@Component({
    selector: 'live-management',
    templateUrl: `<ng-content></ng-content>`
})
export class LiveManagement {}

至于第二部分我不太确定，但会建议调查@ContentChildren方法;

未经测试的代码：

@Directive({selector: '[.my-container]'})
export class IdSelector{
    @Input() id: string;
}

@Component({
    selector: 'live-management',
    template: `<ng-content></ng-content>`
})
export class LiveManagement implements AfterViewInit{
    @ContentChildren(IdSelector) elements: QueryList<any>;

    ngAfterViewInit(){
        console.log('My element id: ' + this.elements.id;);
    }
}

假设上面的代码有效（可能有一点点），你必须调整你的PHP，将数字添加到id属性，并附加到类名。

总而言之，我确实认为在Angular 2中可以实现这一点，但是在新的情况下，你可能会遇到困难。有了这个，我强烈建议不要使用Angular 1，因为很多reasons。如果Angular 2无法用于您的用例，请查看Vue.js或React

绑定到已经呈现的HTML

1 个答案: