如何告诉Angular2忽略一个嵌入式的Angular1应用程序?

I've got an Angular1 app bootstrapped inside an Angular2 component.

我有一个Angular1应用程序在Angular2组件中启动。

Template:

模板:

<div #ng1Hook></div>
<input type="text" ng-model="vm.filters.date" />

Component:

组件:

@ViewChild('ng1Hook') div; 
ngAfterViewInit() {
    angular.bootstrap(this.div.nativeElement, ['ng1Module']);
}

The problem is that NG2 is trying to parse the NG1 code inside of its template. For example, further down the template there's code like this: ng-model="vm.filters.date" and ofcourse NG2 can't handle this.

问题是NG2试图解析模板中的NG1代码。例如，在模板的后面有这样的代码:ng-model=“vm.filters”。日期“当然NG2不能处理这个。

Right now, my NG2 component is complaining it cannot read property 'xyz' of undefined which is something I'm using in the NG1 component template ng-model=vm.xyz

现在，我的NG2组件抱怨它不能读取未定义的属性“xyz”，这是我在NG1组件模板ng-model=vm.xyz中使用的东西

How can I tel NG2 to ignore the NG1 code inside of its template? Or are there other ways of properly embedding NG1 inside NG2?

我如何才能在它的模板内忽略NG1代码?或者在NG2中是否有其他正确的嵌入NG1的方法?

1 个解决方案

#1

You can add the attribute ngNonBindable to prevent Angular2 to process bindings or instantiate directives or or components.

您可以添加属性ngNonBindable，以防止Angular2被处理绑定或实例化指令或组件。

If the HTML is added dynamically Angular2 also won't process it

如果HTML被动态添加，Angular2也不会处理它

<div [innerHTML]="someHtml">

The content of someHtml would be added to the DOM and not processed by Angular2 in any way.

someHtml的内容将被添加到DOM中，而不会被Angular2以任何方式处理。

#1