标签: angular2-routing

如果我转到特定的URL，我目前正在尝试使我的angular2应用程序打开一个弹出窗口。

示例：mywebsite.com/register

它应该直接打开一个带有弹出窗口的网页进行注册。

目前我有：

主HTML

 <header></header>
<body-cmp></body-cmp>


<div class="row">
  <button md-raised-button class="md-raised md-primary" type="submit" ><a href="" [routerLink]="['/Login']">S'incrire</a></button>

</div>
<router-outlet></router-outlet>
<footer></footer>

维护

@RouteConfig([
  {
    path: '/register',
    name: 'Login',
    component: LoginCmp
  }
])

它正在工作，我的Login.html已加载，但是如何删除页眉，正文和页脚，还出现弹出窗口？

谢谢

这是@Shuhei帮助我解决了config.js问题后出现错误的后续帖子.角度2 rc路由器angular2-polyfills.js:349错误

这是我的app.component.ts

import { Component,provide }       from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES,Router } from '@angular/router-deprecated';

import { HeroShellComponent } from '../apps/hero/hero-shell.component';
import {HomeComponent} from '../home/home.component';

import {Login} from '../login/auth.component';
import {Authentication} from '../login/auth.service';
import {isLoggedin}  from '../login/auth.isLoggedin';

@Component({
  selector: 'my-app', 
  templateUrl: 'app/appshell/app.component.html',
  styleUrls: ['app/appshell/app.component.css'],
  directives: [ROUTER_DIRECTIVES],
})

@RouteConfig([
    {
        path: '/app/apps/hero/...',
        name: 'Hero Sample',
        component: HeroShellComponent,
    },
    { path: '/app/apps/testapp1', name: 'Testapp1', component: HomeComponent },
    { path: '/', redirectTo: ['Login'] },
    { path: '/home', name: 'Home', component: HomeComponent …

我对任何JS框架都是全新的。刚开始学习Angular2。我正在为实习做一些基本的应用程序。从角度应用程序中，我将名称发布到Java控制器，获取所需的信息并将其发送回去。当名字是“ Dave”或“ Hal”时，基本上会发生乐趣。一切看起来不错，但是当我运行服务器并尝试进入我的应用程序时，我得到了

例外：错误：未捕获（承诺）：无法解析RouterOutlet的所有参数：（RouterOutletMap，ViewContainerRef，？，名称）。

据我从文档中得知，缺少的参数是componentFactoryResolver。如何摆脱此错误并正确运行所有错误。

这些是文件：

的 app/main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';

import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS
])
    .catch(err => console.error(err));

的 app/app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES }  from '@angular/router';

@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}</h1>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
    title = 'Names';
}

的 app/app.routes.ts

import { provideRouter, …

我正在寻找Angular2路由器中ui-router抽象状态的类似解决方案.

拥有" 虚拟 "父状态来解决子状态的一些常见问题.

Angular2我是懒惰加载模块并设置子路由如下

在 module.ts

const routes: Routes = [
    { path: '', component: ProgramsComponent},
    { path: 'create/:id', component: CreateProgramComponent}

];

这里是利用"创建"路线的链接

<a [routerLink]="['create','123']" class="btn btn-primary">New</a>

在接收器组件中试图提取如下的id值

constructor(private route: ActivatedRoute, private programService:ProgramService) {

    this.route.params
        .map(params => params['id'])
        .switchMap(id => this.programService.getProgramById(id))
        .subscribe(program => this.model = program);
}

我得到以下错误,任何帮助表示赞赏

core.umd.js:3462 EXCEPTION: Uncaught (in promise): TypeError: this.route.params.map is not a function
TypeError: this.route.params.map is not a function

如何限制组件在背压时加载.实际上我有三个组件A(正常组件),B(LoginComponent)和C(Otp验证组件).我在某个按钮点击时从A路由到组件B,从B到C路由到组件B以验证用户.现在在对组件C进行验证之后,我想回到组件'A',并希望从历史记录中删除组件'B'和'C',以便在从浏览器返回时不加载'B'(LoginComponent)和'C'再次.那怎么能在angularjs 2中做到这一点.

我几天前从git hub克隆了ng2-admin目录并运行了npm install之后我能够运行并看到UI,现在我已经从ng2-admin中删除了node_modules文件夹,docs文件夹和dist文件夹,现在面向下面具有分散UI的浏览器控制台中的错误

那么如何解决以下错误,`

Uncaught Error: Module build failed: Error: No PostCSS Config found in: D:\ng2-admin\node_modules\bootstrap-loader
    at Error (native)
    at D:\ng2-admin\node_modules\postcss-load-config\index.js:51:26
    at Error (native)
    at D:\ng2-admin\node_modules\postcss-load-config\index.js:51:26
    at Object../node_modules/css-loader/index.js!./node_modules/postcss-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/index.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js!./node_modules/bootstrap-loader/no-op.js (http://localhost:5000/assets/vendor.bundle.js:56497:7)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at Object../node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./node_modules/postcss-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/index.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js!./node_modules/bootstrap-loader/no-op.js (http://localhost:5000/assets/vendor.bundle.js:88168:15)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at Object../node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js (http://localhost:5000/assets/vendor.bundle.js:52755:22)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at Object../node_modules/bootstrap-loader/loader.js (http://localhost:5000/assets/vendor.bundle.js:52782:18)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at Object../src/vendor.browser.ts (http://localhost:5000/assets/vendor.bundle.js:90058:1)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at Object.5 (http://localhost:5000/assets/vendor.bundle.js:90087:18)
    at __webpack_require__ (http://localhost:5000/assets/polyfills.bundle.js:54:30)
    at webpackJsonpCallback (http://localhost:5000/assets/polyfills.bundle.js:25:23)
    at http://localhost:5000/assets/vendor.bundle.js:2:1
./node_modules/css-loader/index.js!./node_modules/postcss-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/index.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js!./node_modules/bootstrap-loader/no-op.js @ util.js:164
__webpack_require__ @ bootstrap 7cfd64b…:52
./node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./node_modules/postcss-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/index.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js!./node_modules/bootstrap-loader/no-op.js @ no-op.js?6a4c:4
__webpack_require__ @ bootstrap …

我正在开发通过CLI构建的Angular 4应用程序，而后端API仍在开发中，我已经在Assets文件夹下为http.get设置了一些json文件。一切在我的本地设备上都运行良好，但是当我部署到IIS时，在开发工具的“网络”选项卡中，尝试访问json文件时会看到404。我在代码中设置URL的方式是硬编码“ assets / api / manager / model.json”。我通过运行npm build --prod构建了项目，并复制了dist文件夹中的内容。在构建后，我确实在dist下看到assets / api / manager / model.json文件。我看到在IIS上托管时，有多种方法可以对路由进行调整，我已经尝试了所有方法（我认为），但似乎无法使其正常工作。

以下是http.get代码

  private assignTasksViewModelUrl = 'assets/api/manager/model.json';
   getTaskAssignmentViewModel(): Observable<AssignTasksViewModel> {

    return this.http.get(this.assignTasksViewModelUrl)
            .map((response: Response) => <AssignTasksViewModel>(this.extractDate(response)))
            .do(data => console.log(JSON.stringify(data)))
            .catch(this.handleError);
  }

我试图使路由和子路由工作在一个简单的配置,但我似乎无法使其工作.

路由:

import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { BookingoverviewComponent } from './bookingoverview/bookingoverview.component';
import { BookingDetailsComponent } from './booking-details/booking-details.component';

const appRoutes: Routes = [
    { path: 'bookingoverview', component: BookingoverviewComponent, 
    children: [
        { path: 'bookingDetails', component: BookingDetailsComponent }
    ]},
    { path: 'bookingDetails', component: BookingDetailsComponent },  
];

@NgModule({
imports: [
    RouterModule.forRoot(appRoutes, { enableTracing: true })
],
exports: [
    RouterModule
]
})
export class AppRoutingModule {

}

和链接:

  <a routerLink="/bookingoverview">Bookingoverview</a> 
  <a [routerLink]="['/bookingoverview', 'bookingDetails']">Details-component</a> 
  <a [routerLink]="['bookingDetails']">Details-component</a> …

在我的路由模块中，我以这种方式传递数据。

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent, data: { ShowTopBar: true, showSideBar: false} },
  { path: 'error', component: ErrorComponent, data: { ShowTopBar: true, showSideBar: false}}

];
export const AppRoutingModule: ModuleWithProviders = RouterModule.forRoot(routes);

为了使数据类型安全，我创建了一个RouteData类，该类将保存ShowTopBarand ShowSideBar值，并通过构造函数对其进行初始化。

export class RouteData {
constructor(showTopbar: boolean, showSideBar: boolean) {
  this.ShowSideBar = showSideBar;
  this.ShowTopBar = showTopbar;
}
 public ShowTopBar: boolean;
 public ShowSideBar: boolean;
}

现在，我以以下方式更改了Routes的声明：

const routes: Routes = [ …