标签: angular2-routing
为什么templateUrl不工作？
为什么templateUrl不工作在角度2.当我使用模板它工作.它不工作..我的代码
http://plnkr.co/edit/WI4gK2vbaj4OUX5ImJor?p=preview
import {Component,View} from 'angular2/core';
@Component({
selector: 'my-app',
// template: '<div (click)="onclck()">hello</div>'
})
@View({
templateUrl: 'home/home.html'
});
export class AppComponent {
onclck(){
alert('--')
}
}
推荐指数
解决办法
查看次数
如果用户未登录Angular2 2.0.0-rc.4,则重定向到登录路由
这是我的html文件
<div class="container">
<h1>Dohatec Data</h1>
<div class="navLinks">
<a [routerLink]="['/home']">Home</a>
<a [routerLink]="['/about']">About-Us </a>
<a [routerLink]="['/price']">Pricing</a>
</div>
</div>
这是我的RouterConfig.
const routes: RouterConfig = [
{ path: '', redirectTo: 'home', terminal: true },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutUsComponent },
{ path: 'price', component: PriceComponent },
{ path: 'login', component: LoginComponent }
];
如果用户未登录/ home路由,我想重定向用户.我可以在RouterConfig中完成吗？我不想使用, canActivate: [LoggedInGuard]因为它限制在路线之前
推荐指数
解决办法
查看次数
Angular 2 Routing:刷新页面,参数为"无法加载资源"错误
我正在从官方教程中学习Angular 2.我刚刚完成了最新的路由教程.困扰我的是我能够点击路径直到细节级别,例如' http:// domainname:portnumber/crisis-center/11 ',其中'crisis-center'是一个子路径''11 '是参数中传递的id.
我发现如果我从" http:// domainname:portnumber " 的根路径导航,那么我可以毫无困难地进入详细页面.但是,如果我打开一个新窗口并直接访问详细视图页面,那么它会给我错误说明
我认为加载'js'文件失败了.
我已经有了基本的ulr标签
在index.html页面中
<html>
<head>
<title>Tour of Heroes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<base href="/">
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
这是我的路径设置
import {RouterConfig} from '@angular/router';
import {CrisisDetailComponent} from './crisis-detail.component';
import {CrisisListComponent} from './crisis-list.component';
import {CrisisCenterComponent} from './crisis-center.component';
import {CrisisAdminComponent} from './crisis-admin.component';
import {AuthGuard} from '../auth.guard';
export const CrisisCenterRoutes: RouterConfig = …推荐指数
解决办法
查看次数
无法绑定到'ngIf',因为它不是'md-card-title'的已知属性
我正在学习Angular2 RC5Angular2材料库并让它在AspNetCore 1.0应用程序中运行,VisualStudio 2015.我使用了一个运行良好的Angular2 RC5单页面应用程序,并试图引入延迟加载,其中只有登录页面将首先加载.当我成功登录后,我想加载剩余的页面.
当我在SPA模式下单击登录按钮时,我会成功重定向到预先加载了登录页面的DashboardComponent页面 - 这是在我引入延迟加载之前.按照本教程后,我现在得到这些错误
错误代码段
Run Code Online (Sandbox Code Playgroud)EXCEPTION: Error: Uncaught (in promise): Template parse errors: Can't bind to 'ngIf' since it isn't a known property of 'md-card-title'. 1. If 'md-card-title' is an Angular component and it has 'ngIf' input, then verify that it is part of this module. 2. If 'md-card-title' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. …
推荐指数
解决办法
查看次数
Angular(2+)中嵌套路由中的多个布局
我正在创建一个类似于应用程序的仪表板.我想在Angular(2+)中实现以下布局计划:
- 路线 - 名称 - 布局
- / - 主页 - 带表格和图表的全宽布局等
- / reports - 报告页面 - 具有更多表格的相同全宽度布局等
- / login - 登录页面 - 没有全宽度布局,只是屏幕中心的简单登录表单
- / signup - 注册页面 - 没有全宽度布局,只是屏幕中心的简单注册表单
- / messages - 电子邮件 - 全宽布局
- / messages/new - 新电子邮件 - 中等布局,不从全宽布局继承
等等...
所以基本上我想做的是完全替换<body>某些(子)路由的内容.
这对我来说不好:角度为2的不同页面的多个布局,因为我不想将/(root)重定向到像/ home这样的任何地方.
这个也不适合:如何在Angular2中切换布局
任何帮助都会很棒!
推荐指数
解决办法
查看次数
在Azure中托管具有路由的Angular2应用程序
我正在使用角度cli在Angular 2中开发一个应用程序.该应用程序工作正常,并在我在Azure中部署它时运行正常,但路由不起作用.我可以通过"myapp.azurewebsites.net"访问我的应用程序,但如果我尝试"myapp.azurewebsites.net/settings",我会收到404错误.我找到了许多指南,有很多不同的方法可以让不同的服务器将所有内容路由到一个索引文件,但根本没有.就像提供web.config文件,配置节点或快速服务器,以及两者同时一样.
所以,我的问题包括两部分.
1. Azure中哪种Web应用程序模板最适合托管Angular2应用程序？
它只是用Angular2编写的单页面应用程序.不是ASP.NET MVC应用程序中包含的那种.
2.如何配置该Web应用程序以使用我在Angular中配置的路由
推荐指数
解决办法
查看次数
否定守卫的承诺结果
我有一个工作的angular2警卫,其中一个canActivate()调用服务isLoggedIn()并返回一个承诺然后解决,并且路线被适当地处理.
但是,我试图做相反的事情,看看用户何时没有登录,并且它无法正常工作.
我尝试了一些简单的事情(添加一个!运算符),希望它能工作:
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService) {}
canActivate() {
return !this.authService.isLoggedIn();
}
}
但是,这总是返回一个假值,并且路径永远不会激活.
这是我的isLoggedIn()功能的相关摘录:
isLoggedIn(): Promise<Boolean> {
var component = this;
return new Promise((resolve, reject) => {
component.queryForUser((user) => {
resolve(user != null);
});
}
});
}
如果用户不等于null,则他登录并且promise以true结算.否则,错误.
虽然我可以简单地添加一个参数来指定我正在寻找的状态,或者甚至创建一个isNotLoggedIn()具有相同逻辑但反转的函数,我问,有没有办法否定承诺的决心的价值canActivate()？
推荐指数
解决办法
查看次数
Angular2 - 单击后链接到文件下载路径到家
我有一个Angular2应用程序,它暴露了一些文件的直接下载链接.
这些文件位于:
[MY_APP_FOLDER]\src\assets\OffertFile
链接href的一个例子是:
/assets/OffertFile/test.xlsx
component.html链接示例如下:
<a href="/assets/OffertFile/test.xlsx" target="_self">
<i class="fa fa-download fa-2x text-primary" aria-hidden="true"></i>
</a>
链接工作,我可以下载文件.问题是,一旦我点击链接,应用程序就会路由到家...
我怎么能避免这个？
感谢支持
推荐指数
解决办法
查看次数
滚动到Angular 4中当前页面的某个元素
单击一个按钮(页面底部),我想转到当前页面顶部的某个元素(在我的情况下,#navbar),但我不知道该怎么做.我试过以下代码但没有用.
<nav class="navbar navbar-light bg-faded" id="navbar">
<a class="navbar-brand" href="#">
{{appTitle}}
</a>
<!-- rest of the nav link -->
</nav>
<!-- rest of the page content -->
<!-- bottom of the page -->
<button class="btn btn-outline-secondary" (click)="gotoTop()">Top</button>
在角度分量中:
import { Router } from '@angular/router';
/* rest of the import statements */
export class MyComponent {
/* rest of the component code */
gotoTop(){
this.router.navigate([], { fragment: 'navbar' });
}
}
如果有人帮我解决问题并解释了为什么我的代码无效,我将非常感激.
请注意,元素(navbar)位于其他组件中.
推荐指数
解决办法
查看次数
如何在使用类似路径时将数据推入Angular 2中的数组
到目前为止,我还没有找到一个如何在Angular 2中将数据推送到数组的简单示例.在AngularJs中它很容易(示例),但我在Angular 2中正在努力,可能是因为我使用的是路由器我不知道如何配置它(我跟随角度英雄的例子).
我想做什么,整个解决方案:
app.module.ts:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HttpModule } from '@angular/http';
import { ProductsService } from '../services/ProductsService';
import { AppComponent } from "./components/app";
import { Products } from "./components/products";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{
path: 'products/:class_id/:type_id',
component: Products
}
], { useHash: …推荐指数
解决办法
查看次数