如何将Angular2组件渲染为字符串？

发布时间：2020-12-17 07:14:26 所属栏目：安全来源：网络整理

导读：我希望能够在构建 Google Maps InfoWindow时使用Angular2模板语法. 据我所知,这意味着将一个组件作为模板字符串传递给InfoWindow构造函数对象中的content属性. 如果是这种情况,我相信我需要对组件模板进行字符串化.这是正确的(并且可能)吗？这是我认为我需

我希望能够在构建 Google Maps InfoWindow时使用Angular2模板语法.

据我所知,这意味着将一个组件作为模板字符串传递给InfoWindow构造函数对象中的content属性.

如果是这种情况,我相信我需要对组件模板进行字符串化.这是正确的(并且可能)吗？

这是我认为我需要做的一个例子：

// Component

import {Component} from 'angular2/core';
import {Thing} from './something/in/my/app/thing.model.ts';

@Component({
  selector: 'my-infowindow',template: `<p>This is an infowindow for {{ something.name }}</p>`
})
export class MyInfoWindowComponent {
    constructor(public something: Thing) {}
}


// Implementation

import {Thing} from './something/in/my/app/thing.model.ts';
import {MyInfoWindowComponent} from './path/to/infowindow.component';

/* { ...stuff... } */

private _buildInfoWindow(thing: Thing): google.maps.InfoWindow {
    return new google.maps.InfoWindow({
      /* v this is what I want v */
      content: new MyInfoWindowComponent(thing).toString() 
      /* ^ this is what I want ^ */
    });
}

解决方法

尝试传递ElementRef angular.io/docs/ts/latest/api/core/ElementRef-class.html.

或ViewChild的东西：

https://angular.io/docs/ts/latest/api/core/ViewChild-var.html

我不会为你编写代码,但这个想法是这样的：

@Component({
  selector: 'my-infowindow',template: `<p #kiddo>This is an infowindow for {{ something.name }}</p>`
})
export class MyInfoWindowComponent {
    @ViewChild('kiddo') viewChild;
    constructor(public something: Thing) {}
    ngOnInit(){
        yourFunction(this.viewChild); //or viewChild.innerHtml or w/e works
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!