相关疑难解决方法(0)

原始标题:无法在Angular 2中初始化动态追加(HTML)组件

我已经创建了一个指令,在初始化时将一个模态附加到正文.当单击一个按钮(带有指令注入其中)时,这个模态会激活.但我希望这个模态的内容是另一个组件(实际上我希望模态是组件).似乎我无法初始化组件.

这是我所做的一切:

http://plnkr.co/edit/vEFCnVjGvMiJqb2Meprr?p=preview

我正在尝试将my-comp作为我的组件的模板

 '<div class="modal-body" #theBody>' 
            + '<my-comp></my-comp>' + 
 '</div>

我正在使用如下所述的应用程序结构

index.ts
|-app.module.ts
|-app.component.ts
|--hero (directory)
   |-hero.module.ts
   |-hero.ts (Data Object)
   |-hero.service.ts
   |-hero.component.ts
   |-index.ts (this file exports data obj, service, component & module)
|--dashboard (directory)
   |-dashboard.module.ts
   |-dashboard.component.ts
   |-index.ts (this file exports module and component)

我希望在仪表板组件中使用英雄服务.下面是我正在使用的代码片段,它按预期工作.但不确定它是否是一个好习惯.

import { Component, OnInit } from '@angular/core';

import { Hero, HeroService } from '../hero/index';
import {Router} from '@angular/router';

@Component({
    moduleId: module.id,
    selector: 'my-dashboard',
    templateUrl: 'dashboard.component.html',
    styleUrls: ['dashboard.component.css']
})
export class DashboardComponent implements OnInit {
    heroes: Hero[] = [];

    constructor(private heroService: HeroService, private router: Router) { } …

我想使用subject将数据发送到另一个组件(用于赚钱目的).我无法取回数据.这是我的代码:

app.component.ts

import { Component } from '@angular/core';
import { shareService } from './share.service';

@Component({
 selector: 'my-app',
  template: `
  <hello></hello>
  <button (click)="passData()">
    Start
  </button>
  `,
  styleUrls: [ './app.component.css' ],
  providers:[shareService]
})
export class AppComponent  {
  constructor(private service : shareService){}

  passData(){
   this.service.send("hello");
}

}

hello.component.ts

import { Component, Input } from '@angular/core';
import { shareService } from './share.service';
import { Subscription }   from 'rxjs/Subscription';

@Component({
  selector: 'hello',
  template: `<h1>Hello!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  providers:[shareService]
})
export class HelloComponent  { …

我希望能够将一些数据\传播事件从页面上的插件传递到我的 Angular 4 应用程序。

更具体地说，在我的情况下，数据\事件是在页面上 Angular 应用程序旁边的 Silverlight 插件应用程序中生成的。

我有以下解决方案：

• 创建一个从 Silverlight 调用的全局 JS 函数（因为这似乎是从 Silverlight 中获取数据的最简单方法），当需要与 Angular 端对话时。
• 反过来，该函数调用一些 Angular 类方法，传递从 Silverlight 收集的数据。

作为说明（不包括 Silverlight 部分），我们可以有以下内容。

作为 Angular 侧入口点的方法：

export class SomeAngularClass {
    public method(data: any): void {
        ...
    }
}

在 Angular 领域之外的某个地方，我们添加了一个全局纯 JavaScript 函数（由 Silverlight 调用）：

window.somePlainJsFunction = function (data) {
    // How to consume SomeAngularClass.method() from here?
}

问题是：我们如何从一个普通的 JavaScript 函数调用 Angular 类方法？