我在Angular中遵循这个路由教程,它只是不起作用.当我使用'comp'选择器来放置它的HTML代码时,它可以正常工作,但是当我尝试使用路由器插座进行路由时,它只显示来自的标头index.html.
我有以下内容:
main.ts:
import * as ng from 'angular2/angular2';
import {Comp} from './comp';
@ng.Component({
selector: 'my-app'
})
@ng.View({
directives: [ng.formDirectives, ng.RouterOutlet],
template: `
<nav>
<ul>
<li>Start</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<main>
<router-outlet></router-outlet>
</main>
`
})
@ng.RouteConfig([{ path: '/', component: Comp }])
class AppComponent {
}
ng.bootstrap(AppComponent, [ng.routerInjectables]); comp.ts:
import * as ng2 from 'angular2/angular2';
@ng2.Component({
selector: 'comp'
})
@ng2.View({
template: `
<h1>hi<h1>
`
})
export class Comp {
constructor() {
}
}index.html的:
<!DOCTYPE html>
<html> …我正在尝试在Angular2中实现文件资源管理器应用程序.
我的主页组件将包含文件夹和文件列表.如果我单击列表中的某些文件夹,然后使用单击文件夹的名称作为查询字符串,我应该导航到另一个组件,该组件再次具有其中的进一步文件夹和文件的列表,这可以继续一些更多的嵌套级别.我希望每个打开的文件夹的路径在url栏中可见(即./Folder1/Folder1.1/Folder1.1.2...so on.)
Folder1
Folder1.1
Folder1.1.1
Folder1.1.2
Folder1.2
Folder2
任何人都可以帮助我实现这一点,因为组件不能用作视图和路由器,我发现很难实现这一点,因为这种几乎无限的嵌套是不允许的.
我正在编写使用routeLink的最简单的组件:
@Component({
selector: 'memorySnippet',
templateUrl: '<div class="memory-snippet-wrapper" *ngIf="memory"
[routerLink]="['MainPanel', 'MemoryPanel', {'id' : this.memory.id}]">',
directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})
export class MemorySnippetComponent {
@Input() memory: Memory;
}
我尝试测试此组件时会出现此问题.我添加路由器链接Karma的那一刻抱怨缺少提供者:
添加所有提供商后,Karma要求我得到这个:
beforeEachProviders(() => [
MemorySnippetComponent,
MEMORY_SERVICE_PROVIDERS,
ROUTER_PROVIDERS,
ApplicationRef
]);
但是当我运行测试时,我得到了这个错误:
EXCEPTION:EXCEPTION:Token RouterPrimaryComponent实例化时出错!(RouterLink - > Router - > RouteRegistry - > Token RouterPrimaryComponent).
原始例外:未实现
ORIGINAL STACKTRACE:错误:未实现
我究竟做错了什么？？？Angular 2(2.0.0-beta.1)还没准备好用路由器指令测试组件吗？
我正在用angular2和MVC5编写单页应用程序.不过,我对两者都很陌生,而且我在路由方面遇到了麻烦.
我想将网址匹配为:
/ - >转到我的索引页面,其中bootstraps angular/api/{controller}/{id?} - > REST API/{*anythingelse} - >如果存在文件,则将其作为静态内容返回; 否则,如果角度可以路由它,有角度路线; 否则返回404.第二点很容易,如果我愿意放弃404返回,我可以让客户端路由工作,但我似乎无法调和它.
看起来应该这样:
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "api",
template: "api/{controller}/{id?}");
routes.MapRoute(
name: "spa",
template: "{*anythingelse}",
defaults: new { controller = "Home", action = "Index" });
});
和:
@RouteConfig([
{ path: "/", name: 'Splash', component: SplashView },
{ path: '/accounts/login', name: 'Login', component: LoginView },
{ path: '/accounts/register', name: 'Registration', component: RegistrationView },
{ path: '/home/...', name: 'Home', component: HomeView },
])
但是,这只是为每个不是静态文件的请求提供Index.cshtml.
我觉得这已经是一个已经解决的问题,但我无法在网上找到任何关于它的信息.如何正确地做到这一点？ …
在我的服务中,我想描述在未经授权的情况下重定向用户时的行为.
export class MessagesService {
constructor (private http: Http) {}
private _usersUrl = '/users.json'; // URL to web api
getUsers() {
return this.http.get(this._usersUrl)
.map(res => <User[]> res.json().data)
.catch(this.handleError);
}
private handleError (error: Response) {
if (error.status == 401) {
// How do I tell Angular to navigate LoginComponent from here?
} else {
return Observable.throw(error.json().error || 'Server error');
}
}
}
我的问题是:
我正在尝试在我的应用程序中使用路由,使用路由器版本3.0.0-beta.1,应用程序正在运行,但是当我点击subjects.component.html中的"下一步"按钮时,我期待获取'的内容' profileDetails.component.html".我创造了一个plunkr例如.这里:http://plnkr.co/edit/jR3jnC6CzmRVCoVFrn1W?p=preview它不适用于plunkr虽然由于我正在使用的角度2素材按钮等我猜,但有谁能告诉我我要去哪里错误？这是我的主要内容:
import {bootstrap} from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import {AppComponent} from './app/app.component';
import {HTTP_PROVIDERS} from '@angular/http';
import { appRouterProviders } from './app/app.routes';
//import {disableDeprecatedForms, provideForms} from '@angular/forms';
bootstrap(AppComponent, [
// disableDeprecatedForms(),
// provideForms(),
HTTP_PROVIDERS,
appRouterProviders
]);
这是app.routes.ts:
import { provideRouter, RouterConfig } from '@angular/router';
import {SubjectsComponent} from './subjects.component';
import {ProfileDetailsComponent} from './profileDetails.component';
import {AgreementComponent} from './agreement.component';
export const routes: RouterConfig = [
{ path: 'card', component: BasicCardComponent },
{ path: 'subjects', component: SubjectsComponent },
{ path: …我正在构建一个应用程序,其中第一个url段代表界面的语言,如:
/en/customer/3
/en/shop
我的路由器设置如下:
{ path: ':lang/customers/:id', component: CustomerComponent },
{ path: ':lang/shop', component: ShopComponent },
我想在引导的AppComponent或翻译服务中使用url(本例中为lang ='en')中的语言参数.我可以在ShopComponent和CustomerComponent中访问此参数,但代码中没有其他地方.当我在AppComponent中输入时:
constructor(private activatedRoute: ActivatedRoute, private router : Router) {
}
ngOnInit() {
this.router.routerState.root.params.subscribe((params: Params) => {
console.log('params: ',params);
}
this.activatedRoute.params.subscribe((params: Params) => {
console.log('params: ',params);
}
}
我得到两个空物.url param也是空的.
我究竟做错了什么？也许更重要的是,我显然缺少对路由器的一些概念性理解,但我在文档或其他地方找不到任何有用的信息.
谢谢你的帮助!
我遇到了一个问题,看起来我无法导航到新路线,同时清除插座/辅助路线.
分别调用这两个动作是有效的 - 但感觉就像一个解决方法.是否有充分理由将它们作为两个电话完成？或者我的实施中是否有错误？或者我应该将其作为GitHub问题提交？
这些独立工作:
// Navigate to `/second`
this._router.navigate(['/second']);
// Clears the `popup` outlet
this._router.navigate(['', {outlets: { popup: null }}]);
我认为这应该有效,但它不清楚出口:
this._router.navigate(['/second', {outlets: { popup: null }}]);
我目前的解决方法是:
this._router.navigate(['', {outlets: { popup: null }}]).then(() => { this._router.navigate(['second']); } );
我创建了一个plnkr概念证明 - 导航代码在global-popup.component.ts
我有一个已部署的angular 2应用程序，可以在生产环境中很好地工作。问题是网络爬虫实际上无法爬网并对整个站点编制索引，我只看到正在爬网的主要索引页面/路由。仅供参考，我的应用程序未使用通用角度。无论如何，我可以使搜索引擎机器人的网站可爬网且可索引，而无需通用角度。如果没有，我如何在现有的常规angular 2项目中使用通用角度。
谢谢！
我必须在路由器插座上设置路由器动画。实际上，我要动画的只是一个路由。这是我的路由模块：
export class CustomReuseStrategy extends RouteReuseStrategy {
...
...
public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return curr.component ? (<any>curr.component).name !== 'CardDetailComponent' : true;
}
}
const wallRoutes: Routes = [
{
path: 'wall',
component: WrapperComponent,
children: [
{ path: '', component: CardListComponent },
{
path: 'placeslist/:idPlacesList/details/:id',
component: CardDetailComponent,
canActivate: [CardDetailsGuard],
data: {
state: 'details',
reuse: false
}
},
{
path: 'placeslist/:id',
component: PlaceslistDetailComponent,
canActivate: [PlacesListDetailsGuard],
data: {
reuse: true
}
},
{
path: 'details/:id',
component: CardDetailComponent,
canActivate: [CardDetailsGuard],
data: …