Angular - 如何在不同级别重用组件？

Question

Imagine we have this component structure:

app1
-- app1.component.html
-- app1.component.ts

parent1
    parent2
        app2
        -- app2.component.html
        -- app2.component.ts

How could I reuse the app2 component in the app1 ? For example, reuse a table (both HTML and logic on typescript) instead of copy and paste code.

I have searched for solutions like ng-template , but failed. Also, call the tag didn't work as well.

Answer 1

If the tag didn't work inside app1 I assume that you are importing app2 component inside another module. If we want to use component over multiple modules you need to import app2 ONLY in shared module then import that module to modules where you want to have that component.

Make sure to export that component inside shared module.

Answer 2

Need to use componentFactoryResolver https://angular.io/guide/dynamic-component-loader For example you want to use ThirdComponent inside FirstComponent

//HTML
<section #firstComp></section>

//TS
import { AfterViewInit, Component, ComponentFactoryResolver, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ThirdComponent } from '../third/third.component';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss']
})
export class FirstComponent implements OnInit, AfterViewInit {
  @ViewChild('firstComp',{read: ViewContainerRef}) firstComp: ViewContainerRef;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  ngOnInit(): void {    

  }

ngAfterViewInit() {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ThirdComponent);
  const componentRef = this.firstComp.createComponent<ThirdComponent>(componentFactory);
}
}