Question

我有 Angular库，其公开组件调用为AComponent。 AComponent具有模板以及一组方法和属性。打包角度库后，它将作为nuget包公开，以便其他项目可以使用它。

@Component({
  selector: 'xxx-editor',
  templateUrl: './xxx.component.html',
  styleUrls: ['./xxx.component.scss'],
})
export class AComponent implements OnInit {
......
......

 logToConsole() {
        console.log('trace for working');
 }

}

我有一个新要求，因此为了满足该要求，我想向外部公开AComponent中的方法之一 logToConsole ，以便依赖方可以使用该组件调用该方法

将说该库供BComponent使用，并在* .ts文件中作为ViewChild访问

BComponent-模板

 <div style="text-align:center">
      <h1>
        Welcome to {{ title }}!
      </h1>
      <xxx-editor #xxxEditor [(ngModel)]="html" [editable]="true"
                        ></xxx-editor>

    </div>

BComponent-Ts

 @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      ngOnInit(): void {
        this.editor.logToConsole();
      }
      title = 'editor-test';

      html = 'sample test data';

      @ViewChild('xxxEditor') editor: AComponent | null;
    }

问题为 this.editor.logToConsole（） logToConsole 未定义。请问如何设计角库？反正我可以使用此方法吗？

Answer 1

这是因为ngOnInit()生命周期方法在angular渲染DOM之前被调用。您应该在ngAfterViewInit()内部调用该方法，该方法会在呈现视图后立即被调用。

ngAfterViewInit(): void {
   this.editor.logToConsole();
}

Angular Docs-描述

ngOnInit

在Angular首先显示指令后初始化指令/组件数据绑定属性，并设置指令/组件的输入属性。

ngAfterViewInit

在Angular初始化组件的视图和子视图之后响应/ 指令所在的视图。

如何使用@ViewChild（）在Angular库外部调用Angular Component方法？

1 个答案:

Angular Docs-描述