<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
<!-- 2. Load our 'modules' -->
<script src='app/app.component.js'></script>
<script src='app/boot.js'></script>
<!--upgrade-->
<script src="node_modules/angular2/upgrade.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
没有<script src="node_modules/angular2/upgrade.js"></script>代码工作正常.当我包括upgrade.js.it显示"未捕获的ReferenceError:require未在angular2中定义".如何克服此错误.
我在Angular 2组件中启动一个计时器,它位于路由器插座内.
setInterval(() => {
...
}, 10000);
当我离开嵌入组件的路径时,计时器不会退出.我怎样才能做到这一点？
当我把一个锚元素放在像这样的角度2组件中的某个部分时,
<a [routerLink]="['/LoggedIn/Profile']">Static Link</a>
一切都很好.单击链接时,角度路由器将我路由到目标组件.
现在我想动态添加相同的链接.在我的应用程序的某个地方,我有一个"通知组件",其唯一的责任是显示通知.
通知组件执行如下操作:
<div [innerHTML]="notification.content"></div>
其中notification.content是NotificationComponent类中的字符串变量,包含要显示的HTML.
notification.content变量可以包含类似的内容
<div>Click on this <a [routerLink]="['/LoggedIn/Profile']">Dynamic Link</a> please</div>
一切正常,并显示在我的屏幕上,但当我点击动态链接时没有任何反应？!
有没有办法让角度路由器使用这个动态添加的链接???
PS.我知道DynamicComponentLoader,但我真的需要一个更无限制的解决方案,我可以将各种HTML发送到我的通知组件,具有各种不同的链接....
对于记录:这是使用当前相当新的"@angular/router": "3.0.0-alpha.8",路由定义位于帖子的底部.
尝试在我的应用程序中导航时,行为会有所不同,具体取决于我是直接输入URL还是跟随链接:
http://localhost:9292地址栏,正确转发到http://localhost:9292/abouthttp://localhost:9292/about通过地址栏导航http://localhost:9292/about/projects通过<a>标签导航,在FrontComponent和[routerLink]="['projects']"属性的上下文中,路由工作正常.损坏:直接导航到http://localhost:9292/about/projects导致以下错误消息(缩短Stacktrace):
Unhandled Promise rejection: Cannot match any routes: 'projects' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'projects'
Stack trace:
applyRedirects/<@http://localhost:9292/node_modules/@angular/router/apply_redirects.js:29:34
Observable.prototype.subscribe@http://localhost:9292/node_modules/rxjs/Observable.js:52:57
我可能在这里做错了什么？有可能有任何方法可以查看错误消息中已拒绝的所有路由吗？
编辑,因为现在已经多次建议:我不怀疑这是服务器端问题.以前的路由router-deprecated工作正常,HTML从失败的路由服务看起来很好.但为了以防万一,这是相关的服务器端路由代码(ruby带sinatra):
# By now I have too often mistakenly attempted to load other assets than
# …我有一个关于Angular 2路由器的小问题,3.0.0-rc.1我希望根据用户角色(例如AdminComponent或UserComponent)导航到不同的主组件.任何人都可以帮助修改以下路线,以便我可以实现所需的功能吗？
{path: 'login', component: LoginComponent}, // <--- This redirects to '/' in case user is logged in
{
path: '',
component: HomeComponent,
canActivate: [AuthGuardService], // <--- Check if user is logged in, else redirect to login
children: [
{
path: '',
component: AdminComponent // <--- Want to navigate here if user role is 'admin'
},
{
path: '',
component: UserComponent // <--- Want to navigate here if user role is 'user'
}
]
}
AuthGuardService.ts
import {Injectable} …我在Angular 2.0中有一个特殊的情况,有路由
我不想重复导航.即,如果用户转到页面a - >然后转到页面b->然后再转到页面a->然后转到页面c并且当用户按下后退按钮时,应该将用户重定向到页面b而不是页面a .我想要实现的是多次按下后退按钮不应多次显示同一页面.所以如果我做了> b> c> a> c> b> a> c> b> a然后开始按回:页面a,b,c应该只出现一次而不是基于常规的浏览器行为.
成功登录后,如果我按下后退按钮,登录屏幕不应该出现,而是应该退出或类似空白URL而不是登录URL.
有什么建议如何实现？
我应该NavigationStart/NavigationEnd在那里使用和写我的逻辑吗？
在我的主要路线中,我将我的个人资料模块延迟加载,/profile如下所示:
{
path: '',
component: HomeComponent
},
{
path: 'profile', loadChildren: './profile/profile.module#ProfileModule'
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
但是,我的配置文件模块加载需要大约1.5到2秒,这很慢.我想在我的模块加载时显示某种加载动画,无论如何都要这样做吗？我试过这样做:
app.component.html
<!-- other stuff ... -->
<router-outlet></router-outlet>
<div class="loading">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
在我的CSS里面,我有:
/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.loading {
opacity: 0;
transition: opacity .8s ease-in-out;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: …我是ionic2的新手.与纯角度路由相比,它的路由有些奇怪.在Angular中:
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
],
我们传递一个常量类型Routes.
在Ionic(sidemenu starter)中,他们传递一个组件来forRoot运行.
import { MyApp } from './app.component';
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
任何的想法？
如果这是在其他地方,请道歉,但我的正常搜索策略让我失望.
当我从API收到500时,我想显示自定义错误页面.我正在使用restangular并有一个响应拦截器,当我收到500时,它会重定向到错误页面,使用:
this.router.navigate(['/error']);
这一切都有效.但是,我想在浏览器导航栏中保留以前的URL,以便在用户刷新时再次尝试上一页,而现在他们必须重新导航到损坏的页面再试一次.
谢谢!
我有一个类Hero需要扩展GoogleCharts类.我还需要实现OnInit来从params获取一些数据.
我怎样才能做到这一点？