我想手动编译一些包含HTML的指令.$compile
Angular 2中的等价物是什么?
例如,在Angular 1中,我可以动态编译HTML片段并将其附加到DOM:
var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);
Run Code Online (Sandbox Code Playgroud) 目前正在查看Angular 1 - > Angular 2的升级路径,我们使用Angular 1工作完成的一件事就是在面向公众的非app页面上重用我们的一些组件.
这些页面实际上是静态HTML(尽管它们由Rails呈现),然后一些Angular 2组件被放入页面中.这与Angular 1一起工作,我们只是使用提供我们需要的指令和组件的模块来引导文档元素.根本没有路由.
使用Angular 2,它看起来像是全有或全无.您声明了一个根组件,并通过该组件呈现所有内容.这对我们来说是一个很大的转变,我想避免改变我们在这些面向公众的页面上做事的方式.
是否可以在静态HTML页面中根据需要使用Angular 2组件,还是需要转移到单个根元素SPA设计?
简而言之,我要问的是,是否可以混合使用静态内容和动态角度组件,或者必须将所有角度组件都放在页面上的单个根元素中?
我已经看到了<ng-content>
在其他嵌套组件中使用的工作示例(例如http://plnkr.co/edit/Hn393B9fJN6zgfaz54tn),但我还没有设法在根Angular2组件中运行它:
HTML模板:
<html>
<body>
<app>
<h1>Hello, World!</h1>
</app>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
打字稿中的Angular2组件:
import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
selector: 'app'
})
@View({
template: 'Header: <ng-content></ng-content>',
})
export class App {
}
bootstrap(App);
Run Code Online (Sandbox Code Playgroud)
我希望这会产生:
<app>
Header: <h1>Hello, World!</h1>
</app>
Run Code Online (Sandbox Code Playgroud)
但它没有,内容<app>
被忽略了.请参阅Plunker http://plnkr.co/edit/dJlA4SQpy8pnrdyDiy9u上的演示.
我想也许这会再次出现一些Angular2哲学或其他东西,所以它甚至不支持,但我的用例与我认为的第一个工作演示非常相似.