SAP Spartacus的自定义路由

我新建了一个自定义Component：

import { Component, OnInit } from '@angular/core';
import { ProductNameNormalizer } from './product-name-normalizer';

@Component({
  selector: 'app-custom-page',
  templateUrl: './custom-page.component.html',
  styleUrls: ['./custom-page.component.scss']
})
export class CustomPageComponent implements OnInit {

  constructor(private productNameNormalizer: ProductNameNormalizer) {
  }

  ngOnInit(): void {
  }

}

HTML页面代码：

<p>custom-page works!</p>

<a href="/cameras/photosmart-e317-digital-camera/300938">Awesome Product</a>

<p></p>
<a [routerLink]="{ cxRoute: 'product', params: {code: '300938',
nameForUrl: 'Jerry' }} | cxUrl">Awesome Product 2</a>

新建一个module，在里面自定义路由逻辑：

const CUSTOM_ROUTES: Routes = [
  { path: 'custom', component: CustomPageComponent, canActivate: [CmsPageGuard] },
  { path: 'contact1', component: CustomPageComponent },
  {
    path: 'faq-alias', component: PageLayoutComponent, canActivate: [CmsPageGuard],
    data: {
      pageLabel: 'faq'
    }
  }
];

语义：

url里输入custom时，打开Component CustomPageComponent，启用PageGuard
url里输入contact1时，打开Component CustomPageComponent，不启用PageGuard
url里输入faq-alias时，打开PageLayoutComponent，使用的CMS page id为faq.

最后将此module导入app module：

测试：

路径custom启用了page guard，能看到not found的提示：

contact1没启用page guard，也看不到整个Spartacus其他section比如header，footer的内容了，就是一个纯粹的html静态页面：

http://localhost:4202/electronics-spa/en/USD/faq-alias：

更多Jerry的原创文章，尽在："汪子熙":