Question

我正在使用Angular 5，试图将空路径子路径加载到空路径父布局路径中。当我访问localhost：4200 / why-us时，将始终加载FullLayoutComponent和WhyUsComponent组件。

但是当我访问localhost：4200时，我无法加载FrontpageComponent

如果我将FrontPageComponent的路径更改为front-page，它将在我访问localhost：4200 / front-page时加载。

似乎空父路径中的空子路径不起作用（我已经尝试过pathMatch btw的所有组合）

我需要FrontpageComponent加载到我网站的根目录，没有任何定义的路径。

RouterModule.forRoot([
        {
            path: '',
            component: FullLayoutComponent,
            children: [
                {
                    path: '',
                    component: FrontpageComponent,
                    pathMatch: 'full',
                    data: {
                        meta: {
                            title: '',
                            description: ''
                        }
                    }
                },
                {
                    path: 'why-us', component: WhyUsComponent, pathMatch: 'full',
                    data: {
                        meta: {
                            title: 'Why Us?',
                            description: 'Why would you choose us? '
                        }
                    }
                }] // close children
       }
])

Answer 1

以下内容会起作用吗？

RouterModule.forRoot([
    {
        path: '',
        component: FullLayoutComponent,
        children: [
            {
                path: '',
                redirectTo: 'front-page'
                component: FrontpageComponent,
                pathMatch: 'full',
                data: {
                    meta: {
                        title: '',
                        description: ''
                    }
                }
            },
            {
                path: 'front-page',
                component: FrontpageComponent,
                pathMatch: 'full',
                data: {
                    meta: {
                        title: '',
                        description: ''
                    }
                }
            },
            {
                path: 'why-us', component: WhyUsComponent, pathMatch: 'full',
                data: {
                    meta: {
                        title: 'Why Us?',
                        description: 'Why would you choose us? '
                    }
                }
            }] // close children
   }
])

Answer 2

尝试一下：

    {
            path:'',
            pathMatch: 'prefix',
  //this will load your page in the router inside your main page        
            children:[
                    {
                    path: '',
                    component: FrontpageComponent,
                    pathMatch: 'full' 
                },
//This will load your main component
                {
                    path: '',
                    component: FullLayoutComponent
                },
                {
                    path: 'why-us',
                    component: WhyUsComponent,
                    pathMatch: 'full'
                }
            ]

        }

此代码位于路由模块中的路由下方：

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [ {
        provide: LocationStrategy, 
        useClass: PathLocationStrategy} ]
})

Answer 3

我设法找到一种可行的方法，即延迟加载

# encoding.ps1
param([Parameter(ValueFromPipeline=$True)] $filename)      
process {
  $reader = [System.IO.StreamReader]::new($filename, [System.Text.Encoding]::default,$true)
  $peek = $reader.Peek()
  $encoding = $reader.currentencoding
  $reader.close()
  [pscustomobject]@{Name=split-path $filename -leaf
                BodyName=$encoding.BodyName
                EncodingName=$encoding.EncodingName}
}


PS C:\> .\encoding.ps1 chinese8.txt

Name         BodyName EncodingName
----         -------- ------------
chinese8.txt utf-8    Unicode (UTF-8)

在MyModule中，我定义了路由，包括带有空字符串的根路径。

Angular 5路由：空路径内的空路径

3 个答案: