Краткий анализ независимых компонентов в Angular и способы их использования.

Одной из интересных особенностей Angular 14 является то, что автономные компоненты Angular наконец-то появились.

В Angular 14 разработчики могут попытаться использовать независимые компоненты для разработки различных компонентов, но стоит отметить, что API независимых компонентов Angular все еще нестабилен, и в будущем могут быть некоторые деструктивные обновления, поэтому это не рекомендуется для использование в производственной среде. [Рекомендация по теме: «Угловое руководство»]

Как создать независимый компонент

Для существующих компонентов мы можем добавить автономный: true в @Component() , а затем использовать imports напрямую без @NgModule() Импортировать другие модули. . Если вы создаете новый компонент, вы можете использовать команду ng generate component <name> --standalone , чтобы напрямую создать независимый компонент, например:

nggenerateComponent button-list --standalone

@Component({
  селектор: 'список-кнопок приложений',  
  автономный: правда,  
  импорт: [
    ОбщийМодуль,
  ],  
  templateUrl: './button-list.comComponent.html',  
  styleUrls: ['./button-list.comComponent.scss']
})
Класс экспорта ButtonListComponent реализует OnInit,

импортирует существующие модули в независимые компоненты.

Мы можем добавлять существующие модули в imports , взяв в качестве примера MatButtonModule :

imports: [.
    ОбщийМодуль,
    МатКнопкаМодуль,
],

чтобы мы могли использовать компонент mat-button MatButtonModule в ButtonListComponent :

<button mat-button>Basic</button>
<button mat-button color="primary">Основной</button>
<button mat-button color="accent">Акцент</button>
<button mat-button color="warn">Предупреждать</button>
<button mat-button Disabled>Отключено</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">Ссылка</a>

Рендеринг:

для запуска приложения Angular с использованием независимых компонентов

является установка AppComponent в качестве независимого компонента:

@Component({
  селектор: 'app-root',  
  templateUrl: './app.comComponent.html',  
  styleUrls: ['./app.comComponent.scss'],  
  автономный: правда,
})
класс экспорта AppComponent {

Второй шаг — добавить импортированные модули из импорта AppModule в импорт AppComponent , но есть два исключения модулей: BrowserModule и BrowserAnimationsModule .

Если импортирован, это может вызвать проблемы: ** BrowserModule уже загружен. Если вам нужен доступ к общим директивам, таким как NgIf и NgFor, вместо этого импортируйте CommonModule .**:

Третий шаг — удалить файл app.module.ts .

Последний шаг — импортировать в main.ts :

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

изменено на:

bootstrapApplication(AppComponent).catch(err => console.error(err));

Таким образом, мы можем использовать независимые компоненты для запуска компонентов Angular.

Настройте маршрутизацию для независимых компонентов

здесь: HomeComponent , ButtonListComponent и ChipListComponent ,

а затем создайте объект ROUTES const ROUTES в main.ts

: Route[] = [.
  {
      путь: '',    
      pathMatch: 'полный',    
      перенаправлениеTo: 'домой'
  },
  {
      путь: «домой»,    
      компонент:HomeComponent
  },
  {
      путь: 'кнопка',    
      loadComponent: () =>
            import('./app/button-list/button-list.comComponent').then(
                    (мод) => mod.ButtonListComponent
            ),
  },
  {
      путь: «чип»,    
      loadComponent: () =>  
          import('./app/chip-list/chip-list.comComponent').then(
                  (мод) => mod.ChipListComponent
          ),
  },
];

Среди них ButtonListComponent и ChipListComponent используют loadComponent для реализации отложенной загрузки маршрутов.

Затем используйте providers для регистрации RouterModule во втором параметре bootstrapApplication .

bootstrapApplication(AppComponent, {
  провайдеры: [
    importProvidersFrom(RouterModule.forRoot([...ROUTES])),
  ],

=

> console.error(err));

Настройка внедрения зависимостей

Когда мы хотим запустить приложение Angular, нам может потребоваться внедрить некоторые значения или сервисы. В bootstrapApplication мы можем регистрировать значения или сервисы через providers .

Например, у меня есть URL-адрес для получения изображений, который необходимо внедрить в PhotoService :

bootstrapApplication(AppComponent, {
  провайдеры: [
    {
          укажите: «photoUrl»,      
          useValue: 'https://picsum.photos',
    },
    {provide: PhotosService, useClass: PhotosService },
    importProvidersFrom(RouterModule.forRoot([...ROUTES])),
    importProvidersFrom(HttpClientModule)
  ],
})

Код PhotoService выглядит следующим образом:

@Injectable()export class PhotosService {
  конструктор(
    @Inject('photoUrl') частный photoUrl: строка,
    частный http: HttpClient ) { }

  public getPhotoUrl(i:number): строка {
      return `${this.photoUrl}/200/300?random=${i}`;
  }
}

Исходный код

Исходный код, используемый в этой статье: https://github.com/damingerdai/angular-standalone-comComponents-app

Онлайн-демонстрация: https://damingerdai.github.io/angular-standalone-comComponents-app/Исходный

текст Адрес: https://juejin.cn/post/7107224235914821662.