À medida que a demanda aumenta, as funções do projeto se tornam mais complexas. Neste momento, você precisa modularizar os componentes do projeto e empacotar em blocos funcionais coesos, o que é perfeito para explorar subrotas e carregamento preguiçoso de módulos no Angular4.
No desenvolvimento anterior, uma função simples de roteamento foi implementada no módulo raiz, que pode ser resumida nos seguintes três passos:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Adicionar uma barra de navegação ao componente shell, onde o comando routerLink aponta para o destino da rota, e o routerLinkActive adiciona o estilo css ao rótulo selecionado
3. Adicionar um comando router-outlet ao template do componente da carcaça, e a visualização será exibida lá
Agora quero implementar subrotas e carregamento preguiçoso de módulos com base nisso.
RouterModule.forRoot() e RouterModule.forChild()
O objeto RouterModule fornece dois métodos estáticos: forRoot() e forChild() para configurar as informações de roteamento.
O método RouterModule.forRoot() é usado para definir as informações principais de roteamento no módulo principal, e RouterModule.forChild() é semelhante ao método Router.forRoot(), mas só pode ser aplicado em módulos de recursos.
Ou seja, forRoot() é usado no módulo raiz e forChild() é usado no submódulo.
Seu filho Lu Ru
Suponha que existam duas páginas sob nossas páginas de configurações /settings, /settings/profile e /settings/password, que representam respectivamente a página de perfil e a página de mudança de senha. definido como um bloco de funções separado, que pode ser encapsulado em um módulo de funcionalidades. Ele possui suas próprias rotas independentes, e as rotas para as páginas de perfil e senha podem ser definidas como subrotas.
No módulo SettingsModule usamos o método forChild(), porque o SettingsModule não é o módulo principal da nossa aplicação.
Outra grande diferença é que definimos o caminho principal do módulo SettingsModule para um caminho vazio (''). Porque se definirmos o caminho para /settings, ele vai corresponder a /settings/settings. Ao especificar um caminho vazio, ele corresponde ao caminho /settings.
Preguiçoso carregando: loadChildren
Configure as informações de roteamento do módulo de configuração no módulo raiz AppModule:
A propriedade LoadChildren com carregamento preguiçoso é usada aqui. Em vez de importar o SettingsModule para o AppModule, a propriedade loadChildren orienta a rota Angular a carregar o módulo SettingsModule de acordo com o caminho configurado pela propriedade loadChildren. Esta é a aplicação específica da função de carregamento preguiçoso do módulo: quando o usuário acessa o caminho /settings/**, o módulo correspondente do SettingsModule será carregado, o que reduz o tamanho do recurso carregado quando a aplicação inicia.
O valor da propriedade do loadChildrens consiste em três partes:
São necessários caminhos relativos para importar módulos
#分隔符
Exporte o nome da classe do módulo
Módulo CommonModule
Mencionei que queria introduzir o módulo CommonModule no módulo de funcionalidades, mas não percebi que queria introduzi-lo no módulo de funcionalidades no início, e como resultado, o erro de página foi reportado durante o roteamento:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Não dá para vincular a 'ngClass' já que não é uma propriedade conhecida de 'div'.
Não dá para vincular a 'ngForOf' já que não é uma propriedade conhecida de 'p'.
A vinculação de propriedades ngForOf não é usada por nenhuma diretiva em um template embarcado. Certifique-se de que o nome da propriedade esteja escrito corretamente e que todas as diretivas estejam listadas nas "@NgModule.declarations".
Não dá para vincular a 'ngIf', já que não é uma propriedade conhecida de 'div'.
......
Depois de verificar por um bom tempo, descobri que era porque eu não introduzi o CommonModule no módulo de funcionalidades, e depois de introduzi-lo, esses erros desapareceram.
O CommonModule fornece muitas instruções comumente usadas em aplicações, incluindo NgIf e NgFor. Mais precisamente, diretivas como NgIf são declaradas no CommonModule a partir de @angular/common.
Importamos o módulo BrowserModule no módulo raiz AppModule, que importou o CommonModule e o reexportou. O resultado final é que, desde que você importe o BrowserModule, receberá automaticamente as instruções no CommonModule.
Importar um BrowserModule torna todos os componentes, diretivas e pipelines expostos pelo módulo disponíveis diretamente em qualquer template de componente sob o AppModule, sem etapas adicionais e tediosas. Mas não importe o BrowserModule para nenhum outro módulo. Módulos de recursos e módulos de carregamento preguiçoso devem ser importados para o CommonModule. Eles não exigem a reinicialização do provedor completo em nível de aplicação. Se você importar um BrowserModule em um módulo de carregamento preguiçoso, o Angular gera um erro.
Esses são alguns dos problemas e resumos que encontrei nos últimos dois dias usando subrotas Angular e carregamento preguiçoso.
|
Publicado em 13/06/2019 13:13:10
|
|
|
|
