标签: angular-routing
Angular将$ http注入配置或提供程序中
我在我的角度应用程序中使用angular-route-segment并尝试从json feed配置段.
我已经有这个问题,因为我无法弄清楚如何注入$http到app.config功能.这失败了Unknown provider: $http
myApp.config(["$http", "$routeSegmentProvider", function ($http, $routeSegmentProvider) {
/* setup navigation here calling $routeSegmentProvider.when a number of times */
}
因此,而不是注入$ HTTP到config,我也尝试注入$routeSegmentProvider到myApp.run
myApp.run(["$http", "$routeSegment", function($http, $routeSegment) {
/* can use $http here to get data, but $routeSegment is not the same here */
/* $routeSegment does not have the when setup method */
}]);
我也试过了
myApp.run(["$http", "$routeSegmentProvider", function($http, $routeSegmentProvider)
但我明白了 Unknown provider: $routeSegmentProviderProvider <- $routeSegmentProvider
推荐指数
解决办法
查看次数
Angular 2:无法解析Router的所有参数
目标
在不失去理智的情况下使路由工作.
错误
Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?, ?)
app.routing.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NavbarComponent } from './navbar/navbar.component';
import { CustomerComponent } from './customer/customer.component';
export const appRoutes: Routes = [
{ path: '', redirectTo: 'customers', pathMatch: 'full' },
{ path: 'customers', component: CustomerComponent },
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
app.module.ts
import { NgModule } from '@angular/core';
import { …推荐指数
解决办法
查看次数
Resolve Guard:如果没有找到数据,则从路由中解析observable的正确方法
如果没有找到数据,angular.io上的示例中的resolve方法返回一个promise或将应用程序导航到特定路由.
resolve(route: ActivatedRouteSnapshot): Promise<any> {
let id = +route.params['id'];
return this.cs.getCrisis(id).then(crisis => {
if (crisis) {
return crisis;
} else { // id not found
this.router.navigate(['/crisis-center']);
return false;
}
});
}
假设,getCrisis函数返回一个observable:
resolve(route: ActivatedRouteSnapshot): Observable<any> {
let id = +route.params['id'];
return this.cs.getCrisis(id).take(1)
}
在可观察的情况下.我怎么知道,没有任何回报,因为我正在处理流？在resolve函数中处理这种情况的最佳模式是什么？
我知道,我可以从组件中使用router.navigate方法,但是想要正确使用路由器解析防护.
推荐指数
解决办法
查看次数
使用templateUrl进行AngularJS路由
我对AngularJS路由有问题:我没有得到任何页面反馈.没有错误或视图切换.
我检查了模块的实现,但它以正确的方式声明.然后我搜索了这样的拼写错误templateURL,但我没有找到任何错字.我也尝试使用ng-href而不是href在列表中,但随后链接不再可点击.
我的代码:
创建了我的导航:
Run Code Online (Sandbox Code Playgroud)<body ng-app="Productportfolio"> <ul> <li> <a href="#/home">Home</a> </li> <li> <a href='#/privat'>Log in</a> </li> </ul> <ng-view></ng-view> <!--own js --> <script src="app.js"></script> <!--Controller --> <script src="ProductCtrl.js"></script> <!--Services --> <!--Direktives--> </body>
制作模板:
Run Code Online (Sandbox Code Playgroud)//home.html <div> <h1> Home </h1> </div> //private.html <div> <h1> Private</h1> </div>声明了一个Angular模块:
Run Code Online (Sandbox Code Playgroud)angular.module('Productportfolio', ['ngRoute'])在我的配置中添加了$ routeProvider:
Run Code Online (Sandbox Code Playgroud)angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl']) .config(['$routeProvider, $locationProvider', function ($routeProvider, $locationProvider) { $routeProvider .when('/home', { templateUrl: 'home.html', controller: 'ProductCtrl' }) .when('/private', { templateUrl: 'private.html', controller: …
推荐指数
解决办法
查看次数
Angular 2:使用参数和可选参数重定向路由
我想将路线重定向到另一条路线:
/ foo/bar/123 schould重定向到/ bar/123; mode = test
我按以下方式配置了路由:
{ path: 'foo/bar/:id', redirectTo: '/bar/:id;mode=test' },
当它重定向时,;mode=test目标URL中缺少该部分.我怎么能包括这个？
推荐指数
解决办法
查看次数
相对路径不起作用
当我在` http:// localhost/overview '时,模块沿着这条路径加载:
http://localhost/app/modules/overview/overview.module.js
但是当我转向页面http://localhost/overview/users然后按F5(刷新页面)时,我收到错误:
Error: Unexpected token <
Evaluating http://localhost/overview/app/modules/overview/overview.module
发生错误是因为URL不正确,他应该是这样http://localhost/app/modules/overview/overview.module.
如何让它正常工作？
这是项目结构:
这是systemjs tsconfig:
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
}
}
这是systemjs配置:
(function (global) {
System.config({
baseURL: "/",
paths: {
'npm:': '/node_modules/'
},
map: {
app: 'app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': …推荐指数
解决办法
查看次数
如何在默认情况下在所有路由上以角度5保持查询参数？
背景:
用户使用参数调用应用程序的URL并使用我的应用程序.在不同路由之间切换时,url参数应该在浏览器的地址栏中保持可见.
我必须在我的应用程序的每个路由上保留查询参数.这意味着如果我有网址
www.example.com/app/test?id=326748798342&state=1
并调用链接[routerLink]="['/login']"我必须得到这个网址:
www.example.com/app/login?id=326748798342&state=1.
默认情况下,我获得没有参数的登录路由.我发现了一个可以设置的解决方案queryParamsHandling='merge'.但这是一个非常糟糕的解决方案,因为这意味着要更改模板和所有navigate()调用中的所有链接.
在默认情况下有没有更简洁的方法来解决这个问题？在应用程序或其他东西的路由数组中设置queryParamsHandling的东西？
推荐指数
解决办法
查看次数
如果 URL 是手动编写的，Angular 会刷新应用程序
我正在使用 Angular 6，但我在更改路线时遇到了问题。如果我使用 routerLink 或 navigate() 方法浏览应用程序，它会正常工作，因为它只加载新模块（如有必要）。但是，例如，如果我在此链接中：localhost:8080/home，我单击 URL，取消“主页”，输入“配置文件”并按 Enter，它正确进入配置文件页面，但应用程序已重新加载（也是应用程序组件）。为什么？我想不通。这是我的路由：
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
也许问题出在 auth-guard 上？
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private store: …推荐指数
解决办法
查看次数
Angular CanDeactivate 不起作用
我正在尝试CanDeactivate在路由中使用该函数，但canDeactivate在另一条路由上调用时从未调用该函数。
CanDeactivateGuard :
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate>{
canDeactivate(component: CanComponentDeactivate) {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
目录视图组件：
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from "rxjs";
import {CanComponentDeactivate} from '../../can-deactivate.guard';
@Component({
selector: …推荐指数
解决办法
查看次数
在 Ionic 5 路由器中登录/注销时登录/主页不会被破坏
我的项目在 IONIC 5 和 Firstore 中。经过ion-router-outlet身份验证的（主页）和未经身份验证的（索引）路由有 2 种不同。以下是为 class 中的用户动态打开登录/主页的代码app.component.ts。
this.afAuth.authState.subscribe(user => {
if (user) {
this.router.navigateByUrl('home');
} else {
this.router.navigateByUrl('index');
}
});
流程：登录页面->（登录）->首页->（退出）->登录页面。当主页打开时，登录页面仍会加载并位于导航堆栈中。在ngOnDestroy登录页面的不执行。注销后，登录页面再次打开，但类 constructor 和ngOnInit方法不执行。这会导致很多问题，因为页面初始化没有重新加载。Flow Home Page -> (logout) -> Login Page -> (login) -> Home Page 也发生了同样的问题。如何在登录后销毁登录页面和注销后的主页，以便在同一会话中重新打开时可以重新加载？
编辑：
以下是路由配置：
app-routing.module.ts
const routes: Routes = [
{
path: 'home',
canLoad: [AuthGuard],
loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
},
{
path: 'index',
loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule)
},
];
无论是Home.html …
推荐指数
解决办法
查看次数
标签 统计
angular-routing ×10
angular ×8
typescript ×3
angularjs ×2
canactivate ×1
ionic5 ×1
routes ×1
systemjs ×1