Question

我的问题是关于Angular 2/4/5模块。

从模块中使用@ViewChild不能正常工作，子节点未定义。在我使用它作为一个简单的组件之前，它运行良好。 *尝试@ViewChildren也......同样

代码示例 -

app.module.ts -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MyNewModule} from './modules/MyNewModule/MyNewModule.module';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    MyNewModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

app.component.ts -

import { Component, OnInit } from '@angular/core';
import { MyNewModule} from './modules/MyNewModule/MyNewModule.module';
@Component({
  selector: 'app-root',
  template: `<button (click)="Print()">Print child</button>
             <my-new-module></my-new-module>
            `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private MyModule:MyNewModule){}

  ngOnInit(){}

  Print(){
   this.MyModule.Print();
  }

}

modules / MyNewModule / MyNewModule.module -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyNewModule} from './MyNewModule.component';

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

模块/ MyNewModule / MyNewModule.ts -

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

@Component({
  selector: 'my-new-module',
  template:`<ng-template #Container></ng-template>`
})
export class MyNewModule implements OnInit {

@ViewChild('Container', {read: ViewContainerRef}) private container: ViewContainerRef;

constructor(){}

ngOnInit(){}

Print(){
  console.log(this.container); => undefined
}



}

当尝试在线搜索答案时，我发现只有尝试@ViewChildren，或者它可能会发生，因为视图还没有初始化。所以我甚至试图在5秒的超时时间内完成...同样的结果。再次使用相同的代码，但作为一个简单的应用程序，而不是模块工作正常。

感谢阅读！：）

Answer 1

正如我从评论中所理解的那样，您希望为组件创建一个功能模块，并在您的项目中重用它。

我建议您查看此组件库PrimeNg及其Github页面。它们具有精心设计的架构，即用于组件的特征模块。

让我们从头开始构建可重用的组件。

我使用angular-cli

创建了一个新应用

ng new my-proj

然后我为稍后开发的组件创建了一个功能模块。我们称之为MyComponent

ng generate module my-component

然后创建了一个名称相同的组件

ng generate component my-component

然后我按照以下

编辑MyComponent

MY-component.component.ts

@Component({
    selector: 'my-component',
    template: `
        <h1>My Component</h1>
        <div #container>
            <ng-content></ng-content>
        </div>
    `,
    styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit, AfterContentInit {

    @ViewChild('container') container: ElementRef;

    constructor() { }

    ngOnInit() {
        console.log(this.container);
    }

    // this life cycle method is called after projected content is initialized.
    ngAfterContentInit() {
        console.log(this.container);
    }

    someMethod() {
    // do something ...
    }
}

然后我从my-component.module.ts导出它，如下所示

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

然后，在我的app.module.ts中导入了此模块，并在app.component

中使用了此组件

另外，如果您想在my-component内访问app.component，可以使用ViewChild

app.component.ts

@Component({
    selector: 'app-root',
    template: `
        <button (click)="onButtonClick()">Click me</button>
        <my-component>
            <div>This is from app component</div>
        </my-component>
    `,
})
export class AppComponent {

    @ViewChild(MyComponentComponent) myComponent: MyComponentComponent;

    onButtonClick() {
        this.myComponent.someMethod();
    }
}

我希望这能为你澄清

修改

要发布您的图书馆，您可以查看以下文章：

Building an Angular 4 Component Library with the Angular CLI and ng-packagr

此外，对于使用您的库从同一文件导入组件和模块的人，您可以从模块中导出它，如下所示

MY-component.module.ts

export {MyComponentComponent} from './my-component.component.ts'; @NgModule({ ... }) export class MyComponentModule {}

要在app.component，
中导入它
app.component.ts

import {MyComponentComponent} from 'your-library/my-component.module';

您可以从同一位置导入模块

app.module.ts

import {MyComponentModule} from 'your-library/my-component.module';

Answer 2

您需要ViewChild为您的模板引用TemplateRef和ViewContainerRef。使用ComponentResolverFactory创建组件，然后使用组件viewRef创建嵌入视图。

@Component({
    selector: 'widget',
    template: '<ng-template #view></ng-template>'
})

export class WidgetComponent implements OnInit {
    @ViewChild('view', { read: ViewContainerRef }) view: ViewContainerRef;
    @ViewChild('view') template: TemplateRef<any>;

    constructor(private factory: ComponentResolverFactory, private viewRef: ViewContainerRef) { }

    ngOnInit() { 
         let component = ... some Type<any>...
         let componentFactory = this.factory.resolveComponentFactory(component);
         let ref:ComponentRef<any> = view.createComponent(componentFactory);
         this.factory.create(this.view, this.message.component);
         this.viewRef.createEmbeddedView(this.template);

    }
}

Angular - 来自My Module的@ViewChild

2 个答案: