我用路由创建了一个简单的应用程序 链接" http:// localhost:4200 "和" http:// localhost:4200/mail "运行良好,
但是当我尝试打开一个链接" http:// localhost:4200/mail/inbox "时,我收到一个错误:"找不到加载'InboxComponent'的主要插座".
是什么导致错误,我该如何解决？
这是我的*.ts文件:
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MailListComponent } from './components/mail-list/mail-list.component';
import { FoldersComponent } from './components/folders/folders.component';
import { InboxComponent } from './components/inbox/inbox.component';
const routes = [
{ path: '',
component: MailListComponent
}, …给定URL,例如/path/path2/path3/123;sdf=df路由配置:
{ path: 'path', data: { g: 'h' }, children: [
{ path: 'path2', data: { c: 'd' }, children: [
{ path: 'something', component: TestpageComponent, data: { a: 'b' } },
{ path: 'path3/create', component: TestpageComponent, data: { b: 'c' } },
{ path: 'path3/:id', component: TestpageComponent, data: { b: 'c' } },
] }
] },
我需要的是找到所有段的实际配置,以便获得data所有级别(url的每个段)上的所有参数的结果集.
我可以通过例如分割段中的URL
console.log(this.router.parseUrl(url));
或者更确切地说
console.log(this.router.parseUrl(url).root.children['primary'].segments);
将返回
[{"path":"path","parameters":{}},{"path":"path2","parameters":{}},{"path":"and","parameters":{}},{"path":"123","parameters":{"sdf":"df"}}]
因此,将URL拆分为段不是问题.但是我需要为每个段获取配置.
我可以获得所有路线的实际配置
console.log(this.router.config);
我可以用段经过配置树,并找出我需要的分支,但它可能会导致,例如同时解决烦恼:id针对create段.所以,我想使用路由器解析配置的 …
该应用程序有一个包含2到3个类别按钮的页面.基本上,按钮单击将拉出每个类别中的项目列表,一旦API获取的数据可用,就应显示该页面.
我已经设计了具有解析API调用的angular 2 app路由,当我们将应用程序功能迁移到angular 4时,我不应该在页面加载时使用微调器阻止整个页面.
当用户点击一个类别时,如果响应被延迟,他可以单击另一个类别.当他向后导航时,他会期望在先前点击的类别中加载数据,但Angular 2/4取消了该路线,因为Navigation ID does not match with the current route
为了更好地理解,请查看下面的plnkr链接. http://embed.plnkr.co/UiyhZWCl63Tfq41WY48q/
同时点击行星和人,观察到只有一个部分载荷和其他部分没有加载数据.如果你做检查,你可以看到NavigationCancel事件被抛出
ApplicationComponent
import { Component } from '@angular/core';
import {Router, ROUTER_DIRECTIVES, Routes, ROUTER_PROVIDERS} from '@angular/router';
import {SchoolyearsComponent} from "./schoolyear/schoolyears.component";
@Component({
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS
],
templateUrl: './app/application.component.html',
styleUrls: ['./app/application.component.css']
})
@Routes([
{
path: '/',
component: SchoolyearsComponent,
},
])
export class ApplicationComponent {}
SchoolyearsComponent
import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES } from '@angular/router';
import { SchoolyearsHomeComponent } from './schoolyears.home.component';
import { CreateSchoolyearComponent } from './create.schoolyear.component';
@Routes([
{
path: '',
component: SchoolyearsHomeComponent,
},
{
path: '/create',
component: CreateSchoolyearComponent …我想routerLink基于Data路由器中的一些显示/隐藏s .该指令已经完成,但我错过了最重要的部分......
例如,我有以下路由器配置(省略组件):
[
{ path: '', children: [
{ path: 'foo', children: [
{ path: 'bar', data: { requiredPermissions: ['a', 'b'] } }
]}
]},
{ path: 'baz', data: { requiredPermissions: ['c'] }, children: [
{ path: ':id' }
]}
]
现在我想问问Router的Route,如果将用于routerLink为/foo/bar或/baz/123.
我查看了Router源代码(https://github.com/angular/angular/blob/master/modules/%40angular/router/src/router.ts),但找不到一些简单的方法来执行此操作.特别是它如何处理这些:id变量.
当然,我可以迭代Router.config,越走越深.但是后来我必须解析那些变量,正则表达式等等.必须有一种更简单的方法,因为角度路由器也必须在内部完成所有这些工作.
你有什么想法/解决方案吗？
欢迎Angular 2 rc.3!
我用project.json从5闵快速入门配置我的项目,但是当我跑npm install我得到遵循错误:
No compatible version found: @angular/router-deprecated@2.0.0-rc.3
Valid install targets:
2.0.0-rc.2, 2.0.0-rc.1, 2.0.0-rc.0, 0.0.0-7, 0.0.0-6
有谁知道这是什么原因？也许quickstart doc过时了？
我有package.json依赖项如下:
"dependencies": {
"@angular/common": "^2.0.0-rc.4",
"@angular/compiler": "^2.0.0-rc.4",
"@angular/core": "^2.0.0-rc.4",
"@angular/http": "^2.0.0-rc.4",
"@angular/platform-browser": "^2.0.0-rc.4",
"@angular/platform-browser-dynamic": "^2.0.0-rc.4",
"@angular/platform-server": "^2.0.0-rc.4",
"@angular/router": "^2.0.0-rc.4",
"angular2-jwt": "0.1.15",
"es6-promise": "^3.2.1",
"es6-shim": "^0.35.0",
"jwt-decode": "^2.0.1",
"reflect-metadata": "^0.1.2",
"rxjs": "^5.0.0-beta.6",
"zone.js": "^0.6.12"
}
但是在安装npm时会出现以下错误:
G:\rc4>npm i
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "i" npm ERR! node v6.0.0 npm ERR! npm v3.8.6
npm ERR! No compatible version found: @angular/router@^2.0.0-rc.4
npm ERR! Valid install targets:
npm ERR! 3.0.0-beta.2, 3.0.0-beta.1, 3.0.0-alpha.8, 3.0.0-alpha.7, 3.0.0-alpha.6, 3.0.0-alpha.5, 3.0.0-alpha.4, 3.0.0-alpha.3, 3.0.0-alpha.2, …我正在试验新的路由器(版本3.0.0-alpha.7),并想知道如何通过routerLink指令指定查询参数？
下面的Router.navigate()方法生成一个URL,如http:// localhost:3000/component-a？x = 1
this.router.navigate(['/component-a'], {queryParams: {x: 1}});
但是,我无法弄清楚如何使用routerLink指令执行相同的操作.像下面的模板返回解析器错误...
<a [routerLink]="['/component-a'], {queryParams: {x: 1}}">Component A</a>
我能得到的最接近的是http:// localhost:3000/component-a; x = 1,它使用子路由的语法.
<a [routerLink]="['/component-a', {x:1}]">Component A</a>
angular2-directives angular2-routing angular2-router angular2-router3 angular
我有一个angular2应用程序(RC6版本),其中一些重要的全局参数使用在启动时收集此文件的服务从配置文件加载:
@NgModule({
imports: [ BrowserModule, FormsModule, HttpModule, AppRoutes, SomeCustomModule ],
declarations: [ AppComponent ]
providers: [
ConfigurationService,
{
provide: APP_INITIALIZER,
useFactory: (config: ConfigurationService) => () => {
return config.load().then(configParams=> { return true;});
},
deps: [ConfigurationService, HttpModule],
multi: true
}
],
bootstrap:[ AppComponent ]
})
export class AppModule { }
如本片段所示,我使用我称之为ConfigurationRervice的内容,它通过http调用读取配置文件并返回一些参数(作为Promise).如果一切顺利,应用程序将完美加载,并且可以在子模块等中访问这些配置参数.
问题是,如果此配置文件未按预期加载,如何停止应用程序加载子模块？(请注意,AppComponent实质上只是一个路由器插座,重定向到其他路由,由多个子模块定义).我可以"禁用"或重定向到错误页面而不是加载由请求的路由定义的模块/组件吗？
我有一条看起来像这样的路线：
/dashboard/55612291A38AB9CB1C8FE7FB7A166E63/(report//right:logs)
这意味着我有一个 DashboardComponent，在其中我在主要出口内打开了一个 ReportComponent。在我的 DashboardComponent 中，我还有一个已命名的插座（右侧），其中 LogsComponent 处于打开状态。
<dashboard>
<router-outlet></router-outlet>
<router-outlet name="right"></router-outlet>
</dashboard>
在我的 ReportComponent 中，我想在正确的插座中打开当前组件的值。有没有一种简单的方法来实现这一目标？
现在似乎可以做
this.route.snapshot._urlSegment.parent.children.right.segments[0].path
有点冗长。谢谢。