在Angular中使用外部组件有两种方法：使用第三方库的组件和使用自定义的外部组件。

1. 使用第三方库的组件：

   • 首先，需要在项目中引入所需的第三方库。可以使用npm或yarn来安装库，例如：npm install @fortawesome/angular-fontawesome。
   • 在需要使用外部组件的模块中导入所需的组件。例如，在app.module.ts中导入FontAwesomeModule：

     import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     

   • 在相应的@NgModule装饰器的imports数组中添加导入的模块：

     @NgModule({
       imports: [
         // other imports
         FontAwesomeModule
       ],
       // other configurations
     })
     export class AppModule { }
     

   • 在需要使用外部组件的组件中，使用标签来引用所需的图标。例如：

2. 使用自定义的外部组件：

   • 首先，创建一个新的Angular项目或选择现有的项目。
   • 在项目中创建一个新的组件，例如my-component。
   • 创建一个新的文件夹，用于存放外部组件的代码，例如external-components。
   • 在external-components文件夹中创建一个新的组件，例如external-component。
   • 在external-component组件中定义所需的HTML模板和逻辑。
   • 在my-component组件中引入external-component组件，并在模板中使用它。例如：

     import { Component } from '@angular/core';
     import { ExternalComponent } from './external-components/external-component';
     
     @Component({
       selector: 'my-component',
       template: `
         
     My Component
         
       `
     })
     export class MyComponent { }
     

   • 在需要使用my-component的模块中导入MyComponent：

     import { NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     import { MyComponent } from './my-component';
     
     @NgModule({
       imports: [BrowserModule],
       declarations: [MyComponent],
       bootstrap: [MyComponent]
     })
     export class AppModule { }
     

   • 最后，在应用的入口文件（通常是main.ts）中引导应用程序：

     import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
     import { AppModule } from './app.module';
     
     platformBrowserDynamic().bootstrapModule(AppModule)
       .catch(error => console.error(error));
     

以上是使用第三方库的组件和自定义的外部组件的解决方法，你可以根据具体的需求选择适合你项目的方法。