Как создать динамические маршруты (URL-строки) в угловых? - PullRequest
Новая
       4

Как создать динамические маршруты (URL-строки) в угловых?

1 голос
/ 05 октября 2019

У меня есть родительский компонент <app-parent>, и в этом родительском компоненте есть несколько кнопок, каждая кнопка откроет новую плавающую панель поверх текущего родителя, и в каждой плавающей панели есть те же кнопки, которые снова открывают плавающую панель. вершина текущей плавающей панели (Укладка панелей) Я хочу, чтобы каждая плавающая панель имела отдельный URL, как я это сделаю?

1 Ответ

1 голос
/ 05 октября 2019

В начале проекта angular спрашивает вас, хотите ли вы иметь модуль маршрутизации. Если вы согласны, он будет создан в папке вашего приложения. Однако, если по какой-то причине вы этого не сделали, вы все равно можете сгенерировать его с помощью команды cli: ng generate module app-routing --flat --module=app

Это даст вам файл, подобный следующему: 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductAddComponent } from './product-add/product-add.component';
import { ProductGetComponent } from './product-get/product-get.component';
import { ProductEditComponent } from './product-edit/product-edit.component';

// here you can configure routes
const routes: Routes = [
  {
    path: 'product/create',
    component: ProductAddComponent
  },
  {
    path: 'products',
    component: ProductGetComponent
  },
  {
    path: 'edit/:id',
    component: ProductEditComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Простоне забудьте сослаться на него в вашем модуле приложения 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
...