cuốn sách gpt4 ai đã làm

(Bản chất) Việc sử dụng Định tuyến góc ngày 06/08/2020

In lại Tác giả: Người biết Thời gian cập nhật: 2024-03-13 05:33:26 28 4
mua khóa gpt4 Nike

Định tuyến trong góc

1. Angular tạo một dự án có định tuyến theo mặc định

  1. Lệnh tạo dự án

ng-demo mới --skip-install

  1. Tạo các thành phần cần thiết
ng g thành phần thành phần/home ng g thành phần thành phần/tin tức ng g thành phần thành phần/nội dung tin tức
  1. Tìm app-routing.module.ts và định cấu hình định tuyến

Giới thiệu linh kiện

nhập { HomeComponent } từ './comComponents/home/home.comComponent'; nhập { NewsComponent } từ './comComponents/news/news.comComponent' nhập { ProductComponent } từ './comComponents/product/product.comComponent' ;

Định cấu hình định tuyến

const các tuyến: Routes = [ {path: 'home', thành phần: HomeComponent}, {path: 'news', thành phần: NewsComponent}, {path:'product', thành phần:ProductComponent}, {path: '*', redirectTo : '/home', pathMatch: 'full' } ];
  1. Tìm mẫu thành phần gốc app.comComponent.html và định cấu hình ổ cắm bộ định tuyến để hiển thị các tuyến được tải động.

Trang chủ Tin tức

Trang chủ Tin tức
// Thành phần được tải hoặc tuyến đường bị nhảy khi tuyến đường không thể khớp { path: '**', /*Any Route*/ // thành phần:HomeComponent redirectTo:'home' }

Trang chủ Tin tức

Trang chủ Tin tức< /a>

4. Định tuyến động

4.1. Truyền tham số dấu chấm hỏi

Phương thức nhảy, nhảy trang hoặc nhảy js
Địa chỉ URL của tham số dấu chấm hỏi được hiển thị dưới dạng.../list-item?id=1

Thuộc tính queryParams đã được sửa


{{ item.name }}

//js nhảy
// bộ định tuyến là một phiên bản của ActivatedRoute

import { Router } from '@angular/router'; . constructor(private router: Router) {} . this.router.navigate(['/newscontent'],{ queryParams:{ name:'laney', id:id } , SkipLocationChange: true // Bạn không thể ghi nó, mặc định là sai, khi đặt thành true, url trong trình duyệt nhảy định tuyến sẽ không thay đổi và các tham số truyền vào vẫn hợp lệ});

Cách lấy tham số

nhập { ActivatedRoute } từ '@angular/router'; constructor(public Route:ActivatedRoute) { } ngOnInit() { this.route.queryParams.subscribe((data)=>{ console.log(data); }) }

4.2 Đường truyền tham số

Địa chỉ URL của tham số đường dẫn được hiển thị dưới dạng.../list-item/1


{{ item.name }}

//js nhảy
// bộ định tuyến là một phiên bản của ActivatedRoute

this.router.navigate(['/list-item', item.id]);

Cấu hình đường dẫn:
{path: 'list-item/:id', thành phần: ListItemComponent}

Cách lấy tham số

this.route.params.subscribe( param => { this.id= param['id']; } )

5. Định tuyến cha con

  1. Tạo thành phầnGiới thiệu thành phần

nhập { WelcomeComponent } từ './comComponents/home/welcome/welcome.comComponent';
nhập { SettingComponent } từ './comComponents/home/setting/setting.comComponent';

  1. Định cấu hình định tuyến
{ path:'home', thành phần:HomeComponent, trẻ em:[{ path:'welcome', thành phần:WelcomeComponent },{ path:'setting', thành phần:SettingComponent }, {path: '**', redirectTo: 'welcome '} ] },
  1. Ổ cắm bộ định tuyến được xác định trong thành phần chính
28 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress