要在Angular 7中使用CoreUI并使用路由器来处理分支URL图像链接,可以按照以下步骤进行操作:
首先,确保你已经安装了Angular CLI,并创建了一个新的Angular项目。你可以使用以下命令来创建一个新的项目:
ng new my-app
进入新创建的项目目录:
cd my-app
安装CoreUI的依赖项。在项目目录中运行以下命令:
npm install @coreui/coreui-angular
然后,打开src/app/app.module.ts
文件,并添加以下导入语句:
import { RouterModule } from '@angular/router';
import { AppSidebarModule } from '@coreui/angular';
在imports
数组中添加以下模块:
RouterModule.forRoot([]),
AppSidebarModule.forRoot()
接下来,打开src/app/app.component.html
文件,并使用以下代码替换其中的内容:
Images
Image 1
Image 2
创建一个新的组件来处理图像链接。在项目目录中运行以下命令:
ng generate component images
打开src/app/images/images.component.ts
文件,并使用以下代码替换其中的内容:
import { Component } from '@angular/core';
@Component({
selector: 'app-images',
template: `
Images
`
})
export class ImagesComponent { }
创建两个分支组件来显示图像。在项目目录中运行以下命令:
ng generate component images/image1
ng generate component images/image2
打开src/app/images/image1/image1.component.ts
文件,并使用以下代码替换其中的内容:
import { Component } from '@angular/core';
@Component({
selector: 'app-image1',
template: `
Image 1
`
})
export class Image1Component { }
同样的步骤也适用于src/app/images/image2/image2.component.ts
文件。
打开src/app/app-routing.module.ts
文件,并使用以下代码替换其中的内容:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ImagesComponent } from './images/images.component';
import { Image1Component } from './images/image1/image1.component';
import { Image2Component } from './images/image2/image2.component';
const routes: Routes = [
{ path: '', redirectTo: '/images/image1', pathMatch: 'full' },
{ path: 'images', component: ImagesComponent, children: [
{ path: 'image1', component: Image1Component },
{ path: 'image2', component: Image2Component }
]}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
最后,打开src/app/app.component.ts
文件,并使用以下代码替换其中的内容:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Images
Image 1