Uma breve análise dos componentes independentes em Angular e veja como utilizá-los

Um dos recursos interessantes do Angular 14 é que os componentes independentes do Angular finalmente chegaram.

No Angular 14, os desenvolvedores podem tentar usar componentes independentes para desenvolver vários componentes, mas é importante notar que a API dos componentes independentes do Angular ainda não é estável e pode haver algumas atualizações destrutivas no futuro, por isso não é recomendado para uso em um ambiente de produção. [Recomendação de tutorial relacionado: "tutorial angular"]

Como criar um componente independente

Para componentes existentes, podemos adicionar standalone: ​​​​true a @Component() e, em seguida, podemos usar imports diretamente sem @NgModule() Importar outros módulos. . Se estiver criando um novo componente, você pode usar ng generate component <name> --standalone para criar diretamente um componente independente, por exemplo:

ng generate component button-list --standalone

@Component({
  seletor: 'lista de botões de aplicativos',  
  autônomo: verdadeiro,  
  importações: [
    Módulo Comum,
  ],  
  templateUrl: './button-list.component.html',  
  styleUrls: ['./button-list.component.scss']
})
export class ButtonListComponent implementa OnInit

importa módulos existentes em componentes independentes

Podemos adicionar módulos existentes em imports , tomando MatButtonModule como exemplo:

imports: [.
    Módulo Comum,
    Módulo MatButton,
],

para que possamos usar o componente mat-button de MatButtonModule em ButtonListComponent :

<button mat-button>Basic</button>
<button mat-button color="primary">Primário</button>
<button mat-button color="accent">Acento</button>
<button mat-button color="warn">Avisar</button>
<button mat-button desativado>Desativado</button>

<a mat-button href="https://damingerdai.github.io" target="_blank">Link</a>

:

para iniciar um aplicativo Angular usando componentes independentes

é definir AppComponent como um componente independente:

@Component({
  seletor: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.scss'],  
  autônomo: verdadeiro,
})
export class AppComponent {

A segunda etapa é adicionar os módulos importados nas importações de AppModule às importações de AppComponent , mas há duas exceções de módulo: BrowserModule e BrowserAnimationsModule .

Se importado, pode causar problemas: ** BrowserModule já foi carregado. Se você precisar de acesso a diretivas comuns como NgIf e NgFor, importe o CommonModule .**:

A terceira etapa é excluir o arquivo app.module.ts

A última etapa é importar em main.ts :

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

alterado para:

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

Desta forma, podemos usar componentes independentes para iniciar componentes Angular.

Configure o roteamento para componentes independentes.

Tenho três componentes independentes aqui: HomeComponent , ButtonListComponent e ChipListComponent

e, em seguida, crie o objeto ROUTES const ROUTES em main.ts

: Route[] = [
  {
      caminho: '',    
      pathMatch: 'completo',    
      redirecionar para: 'casa'
  },
  {
      caminho: 'casa',    
      componente:HomeComponent
  },
  {
      caminho: 'botão',    
      carregarComponent: () =>
            import('./app/button-list/button-list.component').então(
                    (mod) => mod.ButtonListComponent
            ),
  },
  {
      caminho: 'chip',    
      carregarComponent: () =>  
          import('./app/chip-list/chip-list.component').então(
                  (mod) => mod.ChipListComponent
          ),
  },
];

Entre eles, ButtonListComponent e ChipListComponent usam loadComponent para implementar carregamento lento de rotas.

Em seguida, use providers para registrar RouterModule no segundo parâmetro de bootstrapApplication .

bootstrapApplication(AppComponent, {
  provedores: [
    importProvidersFrom(RouterModule.forRoot([...ROTAS])),
  ],

=

> console.error(err));

Configurando a injeção de dependência

Quando quisermos iniciar uma aplicação Angular, poderemos precisar injetar alguns valores ou serviços. No bootstrapApplication , podemos cadastrar valores ou serviços através de providers .

Por exemplo, tenho uma URL para obter fotos, que precisa ser injetada no PhotoService :

bootstrapApplication(AppComponent, {
  provedores: [
    {
          forneça: 'fotoUrl',      
          useValue: 'https://picsum.photos',
    },
    {fornecer: PhotosService, useClass: PhotosService },
    importProvidersFrom(RouterModule.forRoot([...ROTAS])),
    importProvidersFrom(HttpClientModule)
  ],
})

O código PhotoService é o seguinte:

@Injectable()export class PhotosService {
  construtor(
    @Inject('photoUrl') fotoUrl privado: string,
    http privado: HttpClient) {}

  public getPhotoUrl(i: número): string {
      return `${this.photoUrl}/200/300?random=${i}`;
  }
}

Código fonte

Código fonte usado neste artigo: https://github.com/damingerdai/angular-standalone-components-app

Demonstração online: https://damingerdai.github.io/angular-standalone-components-app/Original

text Endereço: https://juejin.cn/post/7107224235914821662