相关疑难解决方法(0)

假设我有一个接口(或实际组件)ListItemRenderer和一个MyRendererComponent实现该接口的组件(或扩展基本组件)

@Component({
    selector: 'my-renderer',
    template: '<div>My renderer</div>'
})
export class MyRendererComponent implements ListItemRenderer {
    ...
}

我想将这个具体的实现传递给另一个组件,例如

@Component({
    selector: 'my-list',
    template: `
        <ul [renderer]="renderer" [items]="items">
            <li *ngFor="let item of items">
                <!-- what goes here? -->
            </li>
        </ul>
    `
})
export class MyList {
    @Input() renderer: ListItemRenderer;
    @Input() items: any[];
    ...
}

显然,父组件将具有renderer类型的公共属性ListItemRenderer.问题是,我如何在我的网站中使用该组件<li>(参见上文中的" 内容？ ")？

我的应用程序中有 10 个组件，当我调用 Home 路由时，我想根据 Home 服务响应加载动态组件。

首页组件

代码将像 Home 组件一样执行 -> 调用 HTTP 服务 -> 返回数组组件名称的列表名称 [例如]

-> 现在我想在内容区域中附加 2 个组件

页面将呈现如下

是否可以通过仅知道它的名称来手动解析组件？

我有一个字符串变量,它将包含一个组件的名称,让我们说"UserService"

我需要能够解决这种类型,我看过Injctor,我可以从文档中看到有一个resolve()和resolveAndCreate()(https://angular.io/docs/ts/latest/api/core/Injector-class.html)

但我没有Type.

谢谢

史蒂夫

编辑:尝试以下:

System.import("path/to/service").then(p=>{

     var injector = Injector.resolveAndCreate([p[this.serviceName]]);//works

     var serviceInstance = injector.get(p[this.serviceName]); //Fails with "No provider for Http! (UserService -> Http)".


});

我有Http可用,它是在bootstrap期间提供的,这适用于应用程序的其他部分.

bootstrap(AppComponent, [
    ROUTER_PROVIDERS, Http, HTTP_PROVIDERS, UrlBuilderService,
    provide(LocationStrategy, { useClass: HashLocationStrategy }),
    provide('notification', { useClass: NotificationService })
]);

有任何想法吗？

进一步编辑:

我现在称之为resolveAndCreate:

var injector = Injector.resolveAndCreate([p[this.serviceName], Http]);

哪个失败了

没有ConnectionBackend的提供者!(UserService - > Http - > ConnectionBackend)

所以我称之为:

var injector = Injector.resolveAndCreate([p[this.serviceName], Http, …

我希望能够单击按钮以添加新组件.因此,例如,如果Angular 2更像Angular 1,我可以这样做:

<button (click)="addComponent()">add</button>

TS:

addComponent():void { 
    let component =  $compile('<component-selector></component-selector>')(scope)
    ele.append(component)
}

注意:我知道在这里已经问了几次类似的问题,但我读过的答案是矛盾的,而且大多依赖于不推荐使用的代码,例如DynamicComponentLoader.我在官方文档上找不到任何相关内容,理想情况下想要找到一种标准化的方法.

我有一个定义为"FancyButton"的组件.我在模板中有这个:

...
<div class="container">
  <div class="fancy">
    <fancybutton></fancybutton>
  </div>
  <button (click)="removeFancyButton">Remove</button>
  <button (click)="addFancyButton">Add</button>
</div>
...

我的问题是,我如何以编程方式删除:

  <div class="fancy">
    <fancybutton></fancybutton>
  </div>

当我点击删除按钮？相反,我该如何重新添加？如果可能的话,我希望它能触发ngOnDestroy,如果"重新添加",则在重新添加时触发ngOnInit.

这是我的花哨按钮组件,下面是我在home.component.html中集成了花式按钮的父模板:

@Component({
  selector: 'fancy-button',
  template: `<button>clickme</button>`
})
export class FancyButton {}

@Component({
  selector: 'home',  // <home></home>
  providers: [
    Title
  ],
  styleUrls: [ './home.component.css' ],
  templateUrl: './home.component.html'
})

我正在使用基于 angular 4 框架的 Ionic 3。而且我需要知道我是否有多个子组件可以异步加载它们，一个一个：

1. 加载父级；
2. 加载第一个孩子；
3. 当第一个孩子加载时，加载第二个孩子；
4. 当第二个孩子加载时，加载第三个孩子
5. 等等

例如，我有一个app.module.ts带孩子的父组件：

@NgModule({
declarations: [
    AppComponentPage
],
imports: [
    IonicPageModule.forChild(AppComponentPage),
    ChildOneComponentModule,
    ChildTwoComponentModule,
    ChildThreeComponentModule,
    ChildFourComponentModule,
],
entryComponents: [
    AppComponentPage
]})
export class AppComponentPageModule {}

和app.component.ts：

import { Component } from '@angular/core';
//import all child components

@Component({
  selector: 'app-parent-component',
  template: `
      <child1-component></child1-component>
      <child2-component></child2-component>
      <child3-component></child3-component>
      <child4-component></child4-component>
  `
 })
 export class AppComponentPage {

    //HOW TO LOAD?

 }

dart 1.24.3,Angular 4.0.0

出于可重复使用的原因,我将我的应用程序分成了许多包.假设我使用的是包C,这取决于依赖于包A的包B.在其他包中也使用A,B可以单独使用.最后,C向B添加了更多信息,并以某种方式定制.

现在,在包中AI有一个显示一些信息的模态窗口,但在包中BI应该添加一个组件,在包C中再添加一个.由于这个模态窗口在我的所有组件表单中使用,我无法在子包内自定义它,因为这意味着继承所有父表单并自定义它们.我想要使​​用的是类似于提供者注入(例如我想在我的应用程序组件C中声明的内容):

 ModalWindowComponent,
      const Provider(pack_b.ModalWindowComponent, useClass: ModalWindowComponent),
      const Provider(pack_a.ModalWindowComponent, useClass: ModalWindowComponent)

谷歌搜索我看到了一些我可以在我的案例中使用的东西,即ComponentResolver类.但是,如果它是Angular 5的新功能或者也可以在角度4中使用,我无法得到.在其他一些地方它似乎也会被弃用,所以我有点困惑.此外,我不需要在DOM中动态添加组件,而是动态地将组件替换为子包中的组件(继承基础组件).

有没有办法做到这一点？有什么例子我可以看看吗？