标签: angular-components

作为序言，这与以下问题有关：

有没有办法以编程方式在 Angular 中渲染组件？

是否可以从视图模型中的数组渲染动态组件？（类似于对上述问题中的单个组件使用 ng-template ）。

<div *ngFor="let component of components">
    <Do something here to render component>
</div>

我之前使用过 KnockoutJs，通过视图中的以下内容可以很容易地完成此任务：

<!-- ko foreach: someArrayOfComponents -->
    <!-- ko component: { componentName: 'some-component', params: someComponentViewModel } --><!-- /ko -->
<!-- /ko -->

我用角度分量(从第一示例这个).当我在组件中绑定对象时,它可以在模板中访问,但不在控制器中.

JS:

function HeroDetailController() {
  console.log("Here I want to use hero.name: ");
  console.log(hero.name); // I want to use binding object in controller, but doesn't work
}

angular.module('heroApp').component('heroDetail', {
  templateUrl: 'heroDetail.html',
  controller: HeroDetailController,
  controllerAs: 'ctrl',
  bindings: {
    hero: '='
  }
});

HTML:

<hero-detail hero="ctrl.hero"></hero-detail>

模板html(这里有效):

<span>Name: {{ctrl.hero.name}}</span>

错误:

ReferenceError:未定义英雄

Plunker:https://plnkr.co/edit/U9CJLs6jgrlsZH6tUdr0

当我创建一个组件ViewContainerRef并将实例分配给父组件的属性(负责子组件创建)时,如果我想要释放内存,null我ViewContainerRef.clear()是否需要在调用之后将此属性设置为？

如果路由器具有子组件，如何共享变量并通过绑定保持变量更新？

这是我的代码（的一部分）：

app_component.dart：

import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';
import 'package:angular2/router.dart';

import 'package:my_app/profile_component/profile_component.dart';
import 'package:my_app/login_component/login_component.dart';

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [
    ROUTER_DIRECTIVES,
    materialDirectives,
    LoginComponent,
    ProfileComponent
  ],
  providers: const [
    ROUTER_PROVIDERS,
    const Provider(LocationStrategy, useClass: HashLocationStrategy),
    materialProviders
  ],
)
@RouteConfig(const [
  const Route(path: 'home', name: 'Home', component: HomeComponent, useAsDefault: true),
  const Route(path: 'profile', name: "User Profile", component: ProfileComponent)
])
class AppComponent {

  @ViewChild('login')
  LoginComponent loginComponent;
  @ViewChild('profile')
  ProfileComponent profileComponent;

  bool get isUserLoggedIn => loginComponent.isUserLoggedIn;

}

app_component.html：

<nav>
    <ul>
    <li *ngIf="!isUserLoggedIn"> …

我有一个导出组件以将其公开给其他模块的模块，我想在作为另一个模块的子模块的模块中使用此组件，我正在导入父模块中的第一个模块以启用子模块内部但是，我我并不完全相信这是最好的方法。

这是我在根文件夹中的共享模块，其中包含我要使用的组件：

应用程序/共享/shared.module.ts

import {dtComponent} from './dt.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    dtComponent
  ],
  declarations: [
    dtComponent
  ]
})
export class DatePModule{ }

我在 app 文件夹中有另一个模块，它像这样导入DatePModule：

应用程序/联系人/contacts.module.ts

import {DatePModule} from '../shared/shared.module.ts';

@NgModule({
  imports: [
    CommonModule,
    DatePModule
  ]
})
export class CTModule{ }

我需要使用dtComponent直接的一些组件CTModule，还需要在在的子模块等组件此组件CTModule。

我可以在CTModule的子模块中再次导入DatePModule，但我不相信这是最好的方法。

应用程序/联系人/其他/other.module.ts

import {DatePModule} from '../../shared/shared.module.ts';

@NgModule({
  imports: [
    CommonModule,
    DatePModule
  ]
})
export class OtherModule{ }

我的问题是，如果DatePModule已经导入到父模块中，为什么我需要再次导入？如果我在OtherModule 中删除此导入，则组件 …

我可以这样做

<my-awesome-component *ngIf="ConditionToIncludeComponent"></my-awesome-component>

但是动态插入组件的每个文档都基于ViewContainerRef.我喜欢它的功能.但是什么使它在*ngif上如此特别？

只需指出两者的优点和缺点.请.谢谢!

目前正在进行Angular5课程,经过一段时间的研究后,我仍然完全不了解以下内容:

码:

App.component.html:

      <app-server-element 
      *ngFor="let serverElement of serverElements"
      [element]="serverElement"
       ></app-server-element>

App.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name:'Testserver',content:'just a test!'},
                    {type: 'server', name:'Testserver',content:'just a test!'}
];  
   }

服务器element.component.html:

  <p>
    <strong *ngIf="element.type === 'server'" style="color: red">
{{ element.content }}</strong>
    <em *ngIf="element.type === 'blueprint'">{{ element.content }}</em>
  </p>

服务器element.component.ts:

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

@Component({
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css']
})
export class ServerElementComponent …

在我的主要内容中,app.ts我宣布了一个全球供应商:

providers: [{provide: Dependency, useValue: createDependency('AppModule provider')}]

(其中createDependency只是一个返回具有getName()方法的类的函数.)

我也有一个组件:

    <my-app-component-3>Hello from 3</my-app-component-3>

代码:

@Component({
    selector: 'my-app-component-3',
    template: `
        <div>Component3:
            <ng-content></ng-content>
            : <span [innerHTML]="dependency?.getName()"></span>
        </div>
    `,

})
export class Component3 {
    constructor(@Host() @Optional() public dependency: Dependency) {}
}

结果是:

组件3:你好3:

但我希望结果如下:

Component3:来自3的Hello:AppModule提供程序

因为基本上app结构是:

<my-app>
  <my-app-component-3>
  </my-app-component-3>
</my-app> 

问题:
为什么@Host() 与父提供商不匹配？

(这是:providers: [{provide: Dependency, useValue: createDependency('AppModule provider')}])

据我所知 - 喷射器应该Dependency以这种方式寻求:

那为什么不找到呢？

PLUNKER

注意

我已经知道,如果我删除@host- 它确实达到了顶峰.我的问题是为什么添加@host - …

所以,我试图解决这个问题.但是,不知怎的,我无法这样做,可能是因为角度5缺乏知识.这是我的服务:

GetCurrentUserData(): Observable<ResponseData> {
    return this.http.get<ResponseData>(ApplicationURLS.GetCurrentUserInformation)
        .map(response => {
            return response;
        });
    //.catch(error => this.handleError(error));
}

这是我的组成部分:

public GetCurrentUserInformation(): any {

        return this.loginService.GetCurrentUserData().subscribe(data => { return data; });
    }

在这里,我试图访问数据:

ngAfterViewInit() {
        debugger;                
        this.responseData = this.GetCurrentUserInformation();
        if (this.responseData.code != responseCodes.success) {
            this.googleInit();
        }

    }

当我检查this.responseData时,它总是返回此而不是我想要的数据:

我只想进行同步调用,这样我就可以立即获取数据.

我也尝试在服务中使用do()但它返回的do()不是函数.

可以说我有一个简单的模块AppModule，其中包含许多导入，声明和提供程序。现在，我想ListComponent为位于此模块的声明列表中的组件编写测试。ListComponent本身使用的很多（但不是每次）导入AppModule。我这样做是这样的：

import { TestBed } from '@angular/core/testing';
// +same copy-pasted list of imports from `AppModule`

beforeEach(done => {
    TestBed.configureTestingModule({
        imports: [
            // +same copy-pasted list of imports from `AppModule`
        ],
        declarations: [
            // +same copy-pasted list of declarations from `AppModule`
        ],
        providers: [
            {
                provide: Http,
                useClass: HttpMock,
            },
            {
                provide: Router,
                useClass: RouterMock,
            }
            // +same copy-pasted list of providers from `AppModule`
        ]
    });

它有效，但是肯定是不正确的方法。我不想复制粘贴太多。也许我可以通过一些方便的方法重用AppModule？伪代码如下：

let appModule = new AppModule();

beforeEach(done …