该应用程序有一个包含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事件被抛出
我正在构建一个angular2应用程序/小部件,它将作为插件嵌入到TYPO3中,可插入任何内容页面.这意味着它可能最终会出现在不同的根路径上,例如:
/page1/app
/page/subpage/subpage/whatever
全局基本URL(base href = ..)已由TYPO3设置,无法更改.如何为某些根前缀赋予角度,以便它可以正确构建其路由？
我正在使用这里记录的新路由器:https://angular.io/docs/ts/latest/guide/router.html
我想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,越走越深.但是后来我必须解析那些变量,正则表达式等等.必须有一种更简单的方法,因为角度路由器也必须在内部完成所有这些工作.
你有什么想法/解决方案吗？
如何[routerLink]从 Angular Router v3扩展指令，以便我可以自己包装一些自定义功能？我查看了RouterLinkWithHref指令，看来这就是我想要扩展的内容，所以我制作了这个：
import {Directive, Input} from '@angular/core';
import {RouterLinkWithHref} from "@angular/router";
import {Model} from "../Classes/Model.class";
@Directive({
selector: 'a[extendedRouterLink]'
})
export class ExtendedRouterLinkDirective extends RouterLinkWithHref {
@Input('extendedRouterLink') model : Model;
// Future custom logic
}
我尝试像这样使用它：
<a [extendedRouterLink]="model">
我将它包含在directives我的组件数组中：
...
directives: [ROUTER_DIRECTIVES, ExtendedRouterLinkDirective],
...
但是，我收到以下运行时错误：
“模板解析错误：无法绑定到‘extendedRouterLink’，因为它不是已知的本机属性”
如果我extends RouterLinkWithHref从我的指令中删除，它可以正常工作而不会出错。我究竟做错了什么？
typescript angular2-directives angular2-routing angular2-router3 angular
我想我已经连接了基本的动画部分,我只需要知道要处理的事件.理想情况下,我想要一个我可以在导航级别使用的解决方案,所以我可以包装我的所有组件,但一个简单的页面加载示例就足够了,非常感激.我在SO上发现了其他一些相关问题,但它们似乎没有回答我的具体问题或过时:
使用Angular 2.0路由器和组件接口承诺的路由组件页面过渡动画的Angular 2"动画幻灯片"
这是我到目前为止:
html文件
<article @heroState="componentState">
<p>article element should fade in/out</p>
</article>
零件
@Component({
selector: 'blog-about',
templateUrl: './app/about/about.html',
animations: [
trigger('heroState', [
state('active', style({
backgroundColor: 'blue',
transform: 'scale(1)'
})),
state('inactive', style({
backgroundColor: 'green',
transform: 'scale(1.1)'
})),
transition('active => inactive', animate('1000ms ease-in')),
transition('inactive => active', animate('1000ms ease-out'))
])
]
})
export class About implements OnInit, OnDestroy {
public componentState: string;
public Title: string
constructor() {
this.Title = "this is about";
}
ngOnInit()
{
this.componentState = 'inactive'; …假设我有以下设置:
employee -------+ employee.module.ts
| employee.routing.ts
+ employee.component.ts
|
sales ----------+ sales.module.ts
| sales.routing.ts
+ sales.component.ts
app.module.ts
app.routing.ts
app.component.ts
而且我希望我的路线看起来像
employee/14/sales
所以我继续定义这些路由声明:
app.routing.ts
...
import { AppComponent } from './app.component';
const appRoutes: Routes = [
{ path: '', component: AppComponent }
];
export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });
employee.routing.ts
...
import { EmployeeComponent } from './employee.component';
export const employeeRoutes: Routes = [
{ path: 'employee/:id', component: EmployeeComponent }
];
export const …这是场景.我有一个UserConsoleModule和ShoppingCartModule.我有一个名为MyProfileComponent的组件.当你转到/ user-console时,你会看到MyProfileComponent,因此我把它放在UserConsoleModule的声明中.现在在/ shopping-cart/profile中,当用户退房时,我正在显示他的个人资料以确保每个信息都正常.所以我重用并将MyProfileComponent放在那里并在ShoppingCartModule中声明该组件.现在它说,组件是两个模块的一部分.我不知道为什么它有两个模块.他们是独立的.无论我重用哪些组件,我都声明在那个特定的模块中,我认为我很好,就像RC 5之前的声明一样.这个模块很好,但实际上却产生了很多混乱.
另一个问题是路线.我有一个AdminConsoleModule,我重用了UserConsoleModule和ShoppingCartModule.我做的是我在AdminConsoleModule的导入中导入了ShoppingCartModule.我/购物车重定向到/ shopping-cart/cart.因此,只要管理员控制台加载,它就会重定向到/ admin-console/cart.虽然它应该在路由器插座中加载UserResults.路由器很困惑.我在这里做错了吗？
作为解决方案的一部分,我制作了一个共享模块,它只包含购物车组件,其目的是在shopping-cart.module中导入shared-shopping-cart.module.ts和shopping-cart.routing.ts. ts,因此它仍然是分离的.但共享模块抛出一个错误,说路由器插座不称为我的shopping-cart.component.ts有路由器插座.
我的admin-console.routing.ts
const AdminConsoleRoutes: Routes = [
{path: '', component: AdminConsoleComponent,
children: [
{path: '', component:UserResultsComponent},
{path: 'search', component:UserResultsComponent},
{path: 'user-messages', component: MyMessagesComponent},
{path: 'user-profile', component: MyProfileComponent },
{path: 'user-progress', component: MyProgressComponent},
{path: 'user-receipts', component: MyReceiptsComponent},
{path: 'user-courses', component: MyCoursesComponent},
{path: 'group-membership', component: GroupMembershipComponent},
]
}
];
@NgModule({
imports:[RouterModule.forChild(ManageUserRoutes)],
exports:[RouterModule]
})
export class AdminConsoleRoutingModule{}
我的AdminConsoleModule:
@NgModule({
imports:[CommonModule, FormsModule, ShoppingCartModule, UserConsoleModule, AdminConsoleRoutingModule],
declarations:[AdminConsoleComponent, UserSearchComponent, UserResultsComponent],
exports:[]
})
export class AdminConsoleModule{}
我没有导入my-profile和一切,因为UserConsole有这些组件.
UserConsoleModule
@NgModule({ …我正在尝试在子组件中使用辅助路由,类似于此处发布的问题.由于发布的"解决方案"更像是一种解决方法,我很好奇如何在上面的博文中做到这一点.
我在路由器3.1.2中使用Angular 2.1.2.
parent.module
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { ParentComponent } from './parent.component';
import { ChildModule } from '../child/child.public.module';
import { ChildComponent } from '../child/child.public.component';
import { OtherModule } from '../other/other.public.module'
@NgModule({
imports: [
ChildModule,
OtherModule,
RouterModule.forRoot([
{ path: '', component: ChildComponent }
])
],
declarations: [ ParentComponent ],
bootstrap: [ ParentComponent ]
})
export class ParentModule { }
parent.component
import …我有以下代码......
export class LoginComponent {
userName: string;
password: string;
rememberMe: boolean = false;
constructor( private auth: AuthenticationService,
private router: Router) {
...
}
...
}
我正在尝试单元测试,但我的第一次尝试失败了....
beforeEach(() => {
router = new Router();
component = new LoginComponent(authService, router);
});
因为它需要Router构造函数的参数.我在这看到 ......
beforeEach(() => addProviders([
APP_ROUTER_PROVIDERS, // must be first
{provide: APP_BASE_HREF, useValue: '/'}, // must be second
{provide: ActivatedRoute, useClass: Mock},
{provide: Router, useClass: Mock}
]));
但我似乎没有APP_ROUTER_PROVIDERS或Mock依赖于任何地方,所以我认为它可能是陈旧的(或者我需要依赖).
我该如何嘲笑这个？它对我正在进行的测试并不重要.
karma-jasmine angular2-routing angular2-testing angular2-router3 angular
这是一个可以玩的玩家:
https://plnkr.co/edit/qTjftING3Hk2fwN36bQa?p=preview
一切都运行良好,除非您手动更改网址栏中的id参数,因为项目下拉列表不会将新projectId显示为当前项目.当用户将网址保存为收藏链接并将其复制/粘贴到网址栏时,会发生这种情况!我会说一个常见的情况!
为了解决这个问题,我可以收听route.params中的更改TestsListComponent并添加一个检查,sharedService/EventEmitter其中更改的ID存在于该下拉列表中.TestsListComponent中的bool返回值existsProjectId决定我应该重定向到/projects页面,因为id不存在.
但老实说,TestsListComponent至少从用户体验的角度来看,重定向是太迟了,因为route projects/:id/tests它已经被激活了.
你会如何解决这种不端行为？
PS
也许有一种全局参数更改我可以听,并检查ProjectsListComponent中的路径及其ID,这将有所帮助!
如果有人知道如何在窗口模式下编辑plunkr的url栏来测试这种不一致性,请告诉我你是如何使readonly url bar可编辑的...即使将url复制到新的选项卡也不行,因为我得到了一个plunkr找不到错误... => 答案