在 Angular2 中，我正面临这个问题。当您刷新页面时。URL 保持不变，但它不会在RouterOutlet.
除了刷新页面问题外，一切正常。
应用程序
import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';
import{HomeCmp} from 'Angular/src/Home/home.ts';
import {ContactUsCmp} from 'Angular/src/ContactUs/contactus.ts';
import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
@Component({
selector: 'micropuppy-app',
templateUrl: "ANGULAR/Templates/home.html",
directives:[HomeCmp,ROUTER_DIRECTIVES,ContactUsCmp],
template: ` <nav>
<ul class="nav navbar-nav">
**<li><a [routerLink]="['Home']">One</a><hr/></li>
<li><a [routerLink]="['ContactUs']">Contact Us</a></li>**
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Technologies <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Angular</a></li>
<li><a href="#">.NET</a></li>
</ul>
</li>
</ul>
</nav>
<router-outlet></router-outlet>`
})
@RouteConfig([
{path:'/Home', name: 'Home', component: HomeCmp}
{path:'/ContactUs', name: …我正在尝试使用Router.navigate方法进行路由。我按照信中的说明进行操作，但是当我通过 API 路由时，它会重新加载根页面。
在我的RootComponent我试图使用
this._router.navigate(['ABC', 'Page1']); 这应该将我重定向到 application/abc/xyz
但是如果我直接application/abc/xyz通过我的浏览器访问，它可以无缝地工作
app.component.ts
import {Component} from "angular2/core";
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from "angular2/router";
import {RootComponent} from "./components/root.component";
import {Page1Component} from "./components/page1.component";
@Component({
selector: 'app',
template: '<router-outlet></router-outlet>',
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS
]
})
@RouteConfig([
{
path: '',
name: 'Root',
component: RootComponent,
useAsDefault: true
},
{
path: '/abc/...',
name: 'ABC',
component: ABCComponent
}
])
export class AppComponent {
}
ABC组件
@Component({
selector: 'abc',
template: '<router-outlet></router-outlet>',
directives: [ROUTER_DIRECTIVES]
}) …搜索了一整天后，我被困住了，所以我想寻求帮助。
我怎样才能在 angular2 中实现这样的东西：http ://dfsq.github.io/ngView-animation-effects/app/#/page/1
我的意思是如何使用 Router 在 2 个页面之间无缝转换？我可以动画页面更改，但现在是这样的：
动画输入->第一页加载->动画输出->空路由器出口（因为组件被破坏） ->动画输入->第二页加载
但我想要：
动画输入->第一页加载->第一页动画输出->第二页动画输入->第二页加载->这里销毁第一页
任何帮助，将不胜感激 ：）
我正在尝试将 URL 参数放入我的组件中以使用 externsre 服务进行搜索。我读到我可以使用 angular2 路由并使用 RouteParams 获取参数，但我认为这不是我需要的，因为我的 angular 应用程序的第一页是 Razor 视图。
我会尽量解释得更好。我的 URL 看起来像： http://dev.local/listing/?city=melbourne
我在剃刀视图中加载我的根组件，如下所示：
<house-list city = "@Request.Params["city"]"></house-list>
然后在我的根组件上，我有：
export class AppComponent implements OnInit {
constructor(private _cityService: CityService) { }
response: any;
@Input() city: any;
ngOnInit() {
this.getHouses();
}
getHouses() {
this.__cityService.getHousesByCity(this.city)
.subscribe(data => this.response = data);
}
}
所以我期待我的组件中的“城市”获取从剃刀视图传递的字符串，但它是未定义的。
我究竟做错了什么？有没有办法在不使用路由的情况下获取参数？如果没有，使用剃须刀的正确方法是什么？
我有一个关于在angular2中测试路由组件的问题.
这是一个简单的组件,它取决于带参数的路由'foo'.foo组件中的属性将设置为参数的值.
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';
@Component({
selector: 'my-component',
templateUrl: './my-component.html'
})
export class MyComponent implements OnInit
{
foo: string;
constructor(
private route: ActivatedRoute
)
{
}
ngOnInit()
{
this.route.params.subscribe((params: Params) => {
this.foo = params['foo'];
});
}
}
现在我想测试一下,如果使用路径创建组件,则将正确设置param.所以我想要的地方expect(component.foo).toBe('3');.
import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {Params, ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs';
import {MyComponent} from './MyComponent';
describe('MyComponent', …我有一个简单的Angular.io应用程序.(angular-cli/4.1.0)
我有一个NavbarComponent,用于呈现用户名.
第一次访问应用程序时我没有登录,我的应用程序重定向到LoginComponent.我的NavBar也被渲染但没有用户名.成功登录后,我被重定向到我的HomeComponent.
这就是问题所在.我的NavBar不显示用户名.但是,如果我执行刷新/ ctrl + r,则会呈现用户名.
怎么了？
app.component.html
<nav-bar></nav-bar>
<router-outlet></router-outlet>
navbar.compoment.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'nav-bar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
me;
ngOnInit() {
this.me = JSON.parse(localStorage.getItem('currentUser'));
}
}
login.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertService, AuthenticationService } from '../_services/index';
@Component({
moduleId: module.id,
templateUrl: 'login.component.html'
})
export class LoginComponent implements OnInit {
model: any = {};
loading …我有一个Angular 1和Angular 2混合应用程序,它使用以下指南设置,从AngularJS升级和将Angular 1应用程序迁移到Angular 2.我的根组件看起来像这样:
import { NgModule, Component } from '@angular/core';
import { RouterModule, UrlHandlingStrategy } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { RouterUpgradeInitializer } from '@angular/router/upgrade';
import { MyModule } from './Mymodule/my-module';
export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
shouldProcessUrl(url: any) {
return url.toString().startsWith("/Mymodule");
}
extract(url: any) {
return url;
}
merge(url: any, whole: any) {
return url;
}
}
@Component({
selector: 'root-component',
template: `
<router-outlet></router-outlet> …javascript angularjs angular2-routing angular angular-hybrid
我有一个表单被填充两个步骤,第一个表单填充对象的主要部分,第二个表单填充子部分.有一种方法可以从form2导航到form1,可以在Chrome和Firefox上运行,但是对于Microsoft Edge,它似乎添加了"/？object",这是我在代码中没做的事情.
我的按钮从form2返回到form1
<button class="btn btn-default pull-right" (click)="onCancel()">{{ 'button.back' | translate }}</button>
我的方法onCancel()
onCancel() {
this.goal.target = this.target;
this.service.setGoalToSave(this.goal);
if (this.isEditing) {
this.router.navigate(['goals/goalForm', this.goal.goalId.toString()]);
} else {
this.router.navigate(['goals/goalForm']);
}
}
Microsoft Edge导航到
但这不是一个有效的路线,因此它会重定向到我的主页面.
任何人都知道造成这种情况的原因或如何解决？
我有一个链接：
<a routerLink="/test" (click)="testClick($event)">Test link </a>
我想在testClick功能上做这样的事情：
testClick(event:any) {
if (..some expression..) {
//custom popup confirmation
//if true --> event.preventDefault();
} else {
// go to link
}
}
但是打电话preventDefault是行不通的。我该如何解决？
使用Angular 5，我试图使用参数id路由到项目页面。在此页面上之后：/ project /：projectid，并再次在标头中将其路由到该页面，仅使用不同的ID，它会引发：
columnNumber：27683文件名：“ //kleinprodesign.new/assets/js/predependencies/zone.min.js” lineNumber：1条消息：“未捕获（承诺）：TypeError：出口为空\ nPreActivation.prototype.setupRouteGuards @ /// kleinprodesign.new/angular2-app/node_modules/@angular/router/bundles/router.umd.js:3601:17\nPreActivation.prototype.setupChildRouteGuards/<@//kleinprodesign.new/angular2-app/node_modules/@angular/ router / bundles / router.umd.js：3550：13 \ nPreActivation.prototype.setupChildRouteGuards @ /// kleinprodesign.new/angular2-app/node_modules/@angular/router/bundles/router.umd.js:3549:9\nPreActivation .prototype.initialize @ // kleinprodesign.new/angular2-app/node_modules/@angular/router/bundles/router.umd.js:3483:9\nRouter.prototype.runNavigate/
eval“ lineNumber：3601消息：“出口为空”
上面的例外在Firefox中。在chrome中，它是：TypeError：无法读取null的属性“ component”
App-routing.module.ts
const routes: Routes = [
{ path: 'main', component: MainViewComponent },
{ path: 'projects', component: ProjectsOverviewComponent },
{ path: 'project/:projectid', component: ProjectItemComponent },
{ path: 'contact', component: MainViewComponent },
{ path: '', redirectTo: '/main', pathMatch: 'full' },
{ path: '**', component: MainViewComponent },
];
@NgModule({
imports: [ RouterModule.forRoot(routes, { …angular2-routing ×10
angular ×9
angular5 ×1
angularjs ×1
asp.net-mvc ×1
jasmine ×1
javascript ×1
razor ×1