Penghala sudut

Amaran: mana-mana dan semua kandungan yang disiarkan bertujuan untuk mengingatkan atau mengekalkan pengetahuan saya dan saya harap ia dapat membantu anda dalam perjalanan anda melalui pembelajaran juga. Ideanya ialah apabila anda mempunyai masa, tambah maklumat yang berkaitan dengan topik ini dalam siaran yang sama, menjadikannya lengkap dan sentiasa terkini.
Jika anda mendapati sebarang kelemahan dalam siaran atau perasan bahawa ada sesuatu yang hilang, bantu saya memperbaiki :)

---

Semasa saya berinteraksi dan menyokong pembangun dalam perjalanan mereka, saya melihat hutang teknikal dan cuba menyokong evolusi pengetahuan. Saya memilih untuk menumpukan pada perkara yang paling menyebabkan kesakitan dan kesukaran kepada pembangun setiap hari, mengikut persepsi saya yang rendah hati.
Salah satu kesukaran ini ialah mengenai ciri penghalaan Angular.
Oleh itu, mari kita bercakap sedikit tentang cara modul navigasi Angular berfungsi, sebagai tambahan kepada beberapa ciri sedia ada.

---

Ringkasan ringkas proses langkah demi langkah yang Angular gunakan untuk menghalakan aplikasi:

1. Konfigurasi Laluan: pertama, anda mentakrifkan laluan dalam modul penghalaan dengan RouterModule.forRoot(routes);
2. Perkhidmatan Penghala: kemudian, anda menggunakan perkhidmatan Penghala untuk menjalankan navigasi;
3. Kemas kini URL: kemudian Angular mengemas kini API Sejarah dan juga mengemas kini url dalam bar alamat penyemak imbas, atau tidak (kita akan bercakap tentang skipLocation kemudian);
4. Padanan Laluan: Angular membandingkan URL dengan laluan yang ditentukan dan memuatkan komponen yang sepadan;
5. Rendering dan Pengesanan Perubahan: Memaparkan komponen dan mengemas kini DOM.

---

API Sejarah

Di bawah tudung, Angular, React atau Vue menggunakan API Sejarah.

Sejarah ialah antara muka penyemak imbas yang membolehkan anda memanipulasi sejarah penyemakan imbas pengguna tanpa memuatkan semula halaman. Ia telah diperkenalkan dengan spesifikasi HTML5 dan menawarkan satu set kaedah untuk menambah, mengubah suai atau mengalih keluar masukan daripada sejarah penyemak imbas, serta bertindak balas kepada perubahan dalam keadaan penyemakan imbas.

Lihat:

Perhatikan bahawa dengan setiap perubahan laluan, objek "sejarah" diisi dan mengenal pasti laluan baharu.

Ini berlaku apabila menggunakan Lokasi dan Penghala:

_import { Location } from "@angular/common"_
_import { Router } from "@angular/router"_

Ini berlaku kerana setiap kali kita menavigasi ke mana-mana laluan, kaedah history.pushState digunakan. Begitu juga, kaedah history.replaceState digunakan setiap kali kami menggunakan replaceUrl.

Pemerhatian penting ialah walaupun API Sejarah dapat memenuhi keperluan paling asas, dari saat kita beralih ke topik pemantauan SPA, kita melihat bahawa ia mempunyai beberapa masalah. Untuk menyelesaikan masalah ini, cadangan baharu untuk menggantikan API ini sedang dijalankan, iaitu API Navigasi. Ia masih dalam fasa percubaan dan kami akan bercakap lebih lanjut mengenainya dalam siaran tentang pemantauan dan prestasi SPA.

---

Jenis strategi

SPA bahagian hadapan mempunyai 2 strategi penghalaan yang paling biasa:
HashLocationStrategy(mod Hash) dan PathLocationStrategy(Mod Sejarah).

Bagi mereka yang sudah bekerja dengan SPA setiap hari, anda tahu perbezaan paling asas antara kedua-dua strategi:

PathLocationStrategy (Mod Sejarah)

URL "Bersih": URL mengikut corak navigasi web tradisional, tanpa sebarang #. Contohnya, /home, /about.
Contoh URL: https://example.com/home.

Strategi Lokasi Hash (Mod Hash):

URL dicincang: URL termasuk # diikuti oleh laluan. Perkara yang datang selepas # tidak dihantar ke pelayan dan dikendalikan sepenuhnya oleh penyemak imbas.
Contoh URL: https://example.com/#/home.

Terdapat beberapa perdebatan tentang penggunaan terbaik setiap satu. Sesetengah mengulas tentang strategi menggunakan HashLocation hanya dalam seni bina SSR dan yang lain memahami bahawa ia membawa lebih kesederhanaan dan oleh itu menggunakannya dalam semua senario, tetapi saya tidak akan membincangkan butiran itu. Berikut ialah petua jika anda berminat untuk mengetahui lebih lanjut tentang perbincangan.

---

Features disponíveis no roteamento do angular

SkipLocationChange

Lembra do que comentamos lá em cima sobre a History API?
O que essa opção faz é garantir que o conteúdo seja renderizado na tela, mas sem acionar o método history.pushstate que é responsável por definir a URL do navegador. Só o status interno do Router que será atualizado.

Repare que,

o history.state possui tamanho == 1

E quando navego para uma próxima rota com o skipLocation ativo(
this.router.navigate(['componentA'], {skipLocationChange: true});
), ele não altera a url e nem o estado da api de histórico

no entanto, quando acessamos os eventos que o router emite, é possível ver que o estado interno do Router está atualizado

Resolvers

Método disponibilizado para permitir executar uma determinada ação antes do componentes ser carregado. Na imagem abaixo, eu mostro que o resolver é carregado primeiro, depois o componente é carregado e a informação é lida:

Exemplo de código

Crie o resolver:

@Injectable({ providedIn: 'root' })
export class TestResolver implements Resolve<string> {

    resolve(): Observable<string> {
        return of('string retornada pelo resolver');
    }
}

Declare-o no arquivo de rotas:

  {path: 'componentB', component: ComponentB, 
   resolve: { testResolve: TestResolver}
}

Receba os parâmetros no componente:

export class ComponentB {

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {
    this.activatedRoute.data.subscribe(res => {
      console.log(res);
    })
  }

Há outras formas de lidar com o problema que os "resolvers" se propõem a sanar. Lembre-se que resolver atua de forma síncrona. Ou seja, para que o componente seja carregado, primeiro o resolver terá que finalizar seu processamento. Isso pode levar a segundos de espera por parte do cliente e a usabilidade da aplicação não ficar tão interessante. Há um tópico bem interessa sobre o uso de resolvers e que você pode conferir aqui.

runGuardsAndResolvers

define quando executar guards e resolvers. Você que utilizou algum guard ou resolver, já deve ter se perguntando se daria pra poder acioná-los só após uma mudança de parâmetros na rota ou de queryParams ou algum outro customizado. Saiba que é possível, utilizando o runGuardsAndResolvers.
Pode declarar direto no arquivo de rotas:

{
    path: 'example',
    component: ExampleComponent,
    resolve: { data: ExampleResolver },
    canActivate: [AuthGuard],
    runGuardsAndResolvers: 'paramsOrQueryParamsChange' // Define quando executar guards e resolvers
  }

Você possui essas opções:

'pathParamsChange' | 'pathParamsOrQueryParamsChange' | 'paramsChange' | 'paramsOrQueryParamsChange' | 'always' | ((from: ActivatedRouteSnapshot, to: ActivatedRouteSnapshot) => boolean);

forRoot

O método forRoot() configura o roteador no nível raiz da aplicação e disponibiliza todas as funcionalidades de roteamento. Com essa configuração, o angula saberá como gerenciar as rotas definidas e as diretivas de roteamento. É com base na declaração do forRoot que routerOutlet, routerLink e outros ficam disponíveis dentro da aplicação.

routerLink

routerLink é uma diretiva usada para definir links de navegação.
e permite a navegação programática entre as diferentes rotas da aplicação. Quando clicado, o link navega para a rota especificada sem recarregar a página inteira.
Sintaxe: [routerLink]="['/path']"

routerLinkActive

routerLinkActive é uma diretiva usada para adicionar uma classe CSS ao elemento quando a rota associada está ativa, facilitando a aplicação de estilos ou classes diferentes aos links de navegação que correspondem à rota atualmente ativa, permitindo destacar visualmente o link ativo.
Exemplo:

<style>
.classRouterLinkActive {
    color: blue;
}
</style>

<button class="color" routerLinkActive="classRouterLinkActive" [routerLink]="['/componentA']">click here A</button>
<button class="color" routerLinkActive="classRouterLinkActive"  routerLink='/componentB'>click here B</button>
<button class="color" routerLinkActive="classRouterLinkActive"  routerLink='/componentE'>click here E</button>

Veja que quando a rota está ativa, a classe é imediatamente aplicada:

activatedRoute

serviço disponibilizado que sempre retorna os dados da rota ativa no momento.
Ao declarar dentro do componente, você vai sempre obter os dados atuais relativos a rota do componente em que está sendo importado:

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {
      console.log(activatedRoute);
  }

redirectTo

O redirectTo, possui duas formas de realizar o roteamento: relativa e absoluta.

De acordo com a forma que você chama a rota:

• relativa: 'rota'
• absoluta: '/rota'

a diferença é que ao usar um caminho absoluto, a busca pelo próximo objeto de configuração começará da raiz, ou seja, o primeiro array de rotas mais externo.
Enquanto que ao usar um caminho relativo, a pesquisa começará na primeira rota na matriz de onde a operação de redirecionamento começou.

relativo:

const routes: Routes = [
  {path: 'componentA', component: ComponentA},
  {path: 'componentB', component: ComponentB, 
  children: [
      {
        path: 'componentC',
        redirectTo: 'componentA'
      },
      {
        path: 'componentA',
        component: ComponentA
      },

    ]
   }
];

Ao usar dessa forma, quando eu estou no componentB, ele direcionará pro componentA, filho de B, formando assim a rota: "componentB/componentA"

Absoluto:

const routes: Routes = [
  {path: 'componentA', component: ComponentA},
  {path: 'componentB', component: ComponentB, 
  children: [
      {
        path: 'componentC',
        redirectTo: '/componentA'
      },
      {
        path: 'componentA',
        component: ComponentA
      },

    ]
   }
];

Já quando colocamos a barra("/"), ele começar a busca pelo raíz do arquivo de rotas e direcionará pro componentA da raíz:

---

Eu espero que tenha gostado e te ajudado a melhor a compreensão de algo ou até mesmo aberto caminhos para novos conhecimentos. Conto com você nas críticas e sugestões para irmos melhorando o conteúdo e mantendo sempre atualizado para a comunidade.

Atas ialah kandungan terperinci Penghala sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!