首页> 疑难解答

如何在不重构的情况下处理Angular 2+(7)路由更改?

withpy 2021-06-19

简介现在,推荐的路由是让路由数组看起来像这样:const appRoutes:Routes = [{path:'',redirectTo:'/ login',pathMatch:'full'},{path:'。 ..

现在,推荐的路由是让路由数组看起来像这样:

const appRoutes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: 'page1', component: Page1Component },  // can't use RouterStringService here I don't think...
    { path: 'page2', component: Page2Component }
]
@NgModule({...})
export class AppRouting Module {}

这一切都很好,很好。我们可以使用它来导航:

  • ts文件 - router.navigate(['/page1'])
  • html文件 - [routerLink]="/page1"

凉。这非常有效。但是,如果我们需要将page1更改为home-feed(或任何不是page1),会发生什么?重构字符串文字是一个皮塔饼,并要求解决问题(特别是在HTML中)。我们可以像这样使用重定向:

// changes to above code block
{ path: 'page1', redirectTo: 'new-page1' },
{ path: 'new-page1', component NewPage1Component },

但这只会增加记住重定向的心理开销,因为其他代码引用仍然可能是router.navigate(['/page1'])

我们还可以使用几乎随处可见的服务。这个(除非我弄错了)在appRoutes中不可用,因为它是在模块外声明的? (这在第一个代码块中注明)

export class RouterStringService {
    static page1: string = '/page1'
    static page2: string = '/page2

    // put string builders here too for things like /pageX/:id

    constructor() {}
}

你们是怎么处理这个的?我知道重构并不理想,但有时候它必须发生。我主要担心丢失路由,因为angular 7使用字符串文字进行推送。你是否使用e2e测试来捕捉这个或者你能以编程方式修复它吗?

3
投票

我还旨在尽可能地避免代码中的字符串文字,原因就在于您提到的原因。一个好主意是拥有配置文件(就像environment.ts一样),它作为不同url-s的参考字典。

如果您需要更改确切的字符串文字,可以在一个地方完成。

如果将这些配置对象导出到相应组件中的模板,则可以从TS文件或HTML模板中引用这些配置对象。

例如:urls.ts文件位于资产或任何其他文件夹中的某个位置:

export const AppUrls = {
    base: "...",
    login: "...",
    ...
} 

在ts文件中:

   import {AppUrls} from '..../urls.ts';

    const appRoutes: Routes = [
        { path: '', redirectTo: AppUrls.login, pathMatch: 'full' },

在模板中,首先导出它:

import {AppUrls} from '..../urls.ts';

@Component({
  selector: '...
})
export class SomeComponent implements OnInit {

  AppUrls = AppUrls;

并在HTML中:

[routerLink]="{{AppUrls.login}}"

此外,router.navigate(['/page1'])不需要斜杠,你可以将不同的URL分隔为数组条目:router.navigate(['firstpart', 'secondpart']) - >这将带你到/firstpart/secondpart

上一篇:如何配置Visual Studio以使用Beyond Compare

下一篇:有没有办法使用通配符来查找完全匹配?

相关文章

  • 如何防止Visual Studio自动完成覆盖下一个单词

    我在Visual Studio中遇到了一个非常烦人的问题。 (我的版本是2010年,我安装了ReSharper和VsVim,但我认为不重要。)当我在开始时在某些代码之前添加文本时......

  • Jpa fetch和n + 1问题

    我使用spring boot 2,jpa和hibernate。我的实体@Entity公共类样本{@EmbeddedId private SampleId id; @MapsId(“samplingId”)@ManyToOne(可选= false)私有...

  • 有没有办法在Python中显示每列的类型?

    我使用dtype来显示列的类型,但是大多数类型将显示为对象,您需要使用type()方法单独检查它,例如,知道它是否是一个str的行为....

  • Spring OAuth安全性 - 隐式流

    是否可以使用spring security实现OAuth隐式流?我想在同一个应用程序中创建auth和resource服务器。我需要标准的auth端点进行身份验证和...

  • 在数组中查找模式的最有效方法是什么?

    最近我试图通过使用C在一组数字中找到模式。当集合很小时,我的代码可以很好地完成。这是我的代码:int frequency [10001]; //这个数组存储一个数字的频率......

  • GeoDjango GDALException - OGR失败

    安装GeoDjango后,我想在管理面板中创建一个“位置”对象,该对象使用地图上的地址和点。提交表单后,我收到类似的错误... GDALException at ...