相关疑难解决方法(0)

我试图从路由器更改页面标题,这可以做到吗？

import {RouteConfig} from 'angular2/router';
@RouteConfig([
  {path: '/home', component: HomeCmp, name: 'HomeCmp' }
])
class MyApp {}

我设置的路线如下

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    data: {
      title: 'Login TTX'
    }
  },
  {
    path: 'list',
    component: ListingComponent,
    data: {
      title: ' TTX Home Page',
      module:'list'
    }
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
];

现在,当我来'/list' 路线然后'listing.component.ts'我写下面的代码

export class ListingComponent {

  public constructor(private router:Router) {
      //here how i can get **data** of **list** routes

  }
}

我有一个带有几个嵌套子视图的Angular 2应用程序.但它会显示在同一页面上router-outlet.

const routes: Routes = [
    {
        path: 'queue/:date/:offset/:type',
        component: BundleListComponent,
        resolve: {
            response: BundleListResolve
        },
        children: [
            {
                path: ':bundleId', component: PointListComponent,
                resolve: {
                    response: PointListResolve
                },
                children: [
                    {
                        path: ':pointId', component: TaskListComponent,
                        resolve: {
                            response: TaskListResolve
                        },
                        children: [
                            {
                                path: ':taskId', component: TaskDetailComponent,
                                resolve: {
                                    response: TaskDetailResolve
                                }
                            },
                            { path: '', component: EmptyComponent }
                        ]
                    },
                    { path: '', component: EmptyComponent }
                ]
            },
            { path: '', component: EmptyComponent }
        ]

    }, …

这是一个关于如何使用Angular 2以"正确"方式实现所需功能的概念性问题.

我的应用程序有一个导航菜单,一个工具栏和一个内容区域.后者包含主要内容<router-outlet>并显示不同的视图,如列表和详细信息.

我想要实现的是工具栏显示不同的组件,具体取决于在内容区域中呈现的组件/视图.例如,列表组件需要工具栏中的搜索控件,而详细信息组件需要保存按钮.

A)我的第一次尝试是<router-outlet>在工具栏中添加另一个(命名)并根据静态路径显示工具栏组件.这有什么不妥之处:

1. 根据我的口味,静态内容工具栏关系过于松散.
2. 该关系在URL中可见(并且可更改).
3. 即使用户导航,工具栏插座也会保留此路径.

B)我的第二次尝试是命令性地导航到主视图组件中的工具栏组件(也使用命名的工具栏插座),ngOnInit它更紧密地耦合它.什么闻起来很糟糕:

1. A2
2. A3,为了防止这种情况我可以"清除"工具栏插座ngOnDestroy,但我还没有发现如何.

C)给路由器一个最后的机会,因为我发现这种工作:

const ROUTES: Routes = [
    {path: "buildings", children: [
        {path: "", component: BuildingListComponent, pathMatch: "full", outlet: "primary"},
        {path: "", component: BuildingListToolbarComponent, pathMatch: "full", outlet: "toolbar"},
        {path: ":id", component: BuildingDashboardComponent, outlet: "primary"}
    ]}
];

这个想法是路由器会选择每个插座的匹配路径.但是(不,它可能很容易)不幸的是,这不起作用:

const ROUTES: Routes = [
    {path: "buildings", children: [
        {path: "list", component: BuildingListComponent, pathMatch: "full", outlet: "primary"},
        {path: "list", component: BuildingListToolbarComponent, …

是否有任何npm模块/ React-Helmet等其他方式允许我们在通过Angular应用程序时更改页面标题？

PS:我正在使用Angular 5.

假设我有以下路线：

[
    {
        path: 'view',
        children: [
            {

                path: ':id',
                component: CustomerViewComponent,
                resolve: {
                    customerViewData: CustomerResolve,
                    edit: ViewRouteResolve // Returns false
                },
                data: {
                    other: false
                },
                children: [
                    {
                        path: 'edit',
                        resolve: {
                            edit: EditRouteResolve // Returns true
                        },
                        data: {
                            other: true
                        }
                    },
                    {
                        path: '',
                        data: {
                            other: false
                        }
                    }
                ]
            }
        ]
    },
    { path: '', component: CustomerListComponent }
]

我想使用CustomerViewComponentfor /view/ 和 /view/1/edit

问题是我无法在我的组件中捕获此数据更改。我已经尝试过resolveordata并且我无法捕捉到任何变化......

此代码不会按预期触发：

this.route.data.subscribe(m => …

我有一个使用角度2的设计,其中所有其他组件加载的标题组件,导航栏组件和主体组件.如下图所示

1. 头
2. 导航
3. 其他组件加载的位置(此部分可能具有嵌套组件/子组件)

所以基本上,在标题组件中,我想显示当前状态.并且在当前状态的底部,我想显示用户的先前状态.

问题:为了实现这一点,我在角度中使用了组件交互技术.

• 重新加载应用后,它会显示当前和
  后退状态的默认值.

• 在用户直接登陆到正文中的子组件的特定页面的场景中,它显示当前和后退状态的默认值.

由于angular遵循组件架构,因此我想要一种更好的方法来实现此功能.

如果我直接进入图片中第3部分的子组件,我的标题组件应根据标题组件中的特定页面获取标题/当前状态.

当ngOnInit I传递当前状态值时,我的解决方案是在每个组件中.我也解析以前的状态值.因此,标头组件显示它,因为服务是使用此链接中的技术编写的 - https://angular.io/docs/ts/latest/cookbook/component-communication.html

但是有些情况下我从服务器获取数据并且必须更新标头当前状态.在那里,我看到根本没有显示.

需要帮助以获得良好的解决方案

PS - 由于这种机制在不同的文件中,并且有点复杂,我无法更新代码模板

我正在尝试在Angular中构建一个选项卡菜单(v2.4.5).根据路线激活选项卡.

例如,我有这样的路线:

const routes: Routes = [
  {
    path: 'tab1',
    component: Tab1Component,
  },
  {
    path: 'tab2',
    component: Tab2Component,
  }
];

如果用户输入http://localhost/tab2我想要tab2突出显示的地址(更改选项卡css).

实现这一目标的最佳方法是什么？