Question

我正在尝试将Angular 2（RC 2）应用程序集成到使用Electron和Angular 2（RC 2）构建的桌面应用程序中。现有应用程序不应该有显着改变，因此我正在寻找简单集成的解决方案。

我正在使用路由器“3.0.0-alpha.7”，它应该是最新的RC 2（由于依赖性，App目前无法更新）。

基本上现有的应用程序有一个“舞台”，我的Angular 2应用程序应该只显示。这是通过单击一个按钮完成的，该按钮可以通过更改布尔值来切换舞台中显示的内容：

stage.html

<div *ngIf="interfaceService.showInterface == false">
    <div class="stage-component component" *ngIf="fileHref">
        <div class="stage-wrapper">
            <webview [...]></webview>
        </div>
    </div>
</div>
<div *ngIf="interfaceService.showInterface == true">
    <div class="stage-component component">
        <div class="stage-wrapper">
            <EntryComponent></EntryComponent>
        </div>
    </div>
</div>

切换效果很好，但是我在使用div操作路由应用程序时遇到了一些麻烦。我的EntryComponent只导入我的App组件并在模板中引用它。

entry.component.ts

import {Component} from '@angular/core';
import {App} from '../../myapp.components/app.component/app.component';        

@Component({
    selector: 'EntryComponent',
    template: `
               <myapp></myapp>
              `,
    directives: [App]
})

export class EntryComponent {        
    constructor() {}    
}

应用程序组件包含我的（子）路由器插座，用户应从中重定向。

app.component.ts

import {Component} from '@angular/core';
import {RouterConfig, ROUTER_DIRECTIVES, Router, provideRouter} from '@angular/router';
import {myAppRoutes} from '../myapp.routes';

@Component({
  selector: 'myapp',
  template: `            
            <router-outlet name="myappinterface"></router-outlet>
            `,
  directives : [ ROUTER_DIRECTIVES ],
  providers: [ provideRouter(myAppRoutes) ]
})

export class App {
  constructor(public router: Router) {
    this.router.navigateByUrl('home');
  }
}

MyApp-Routes如下所示：

myapp.routes

import {RouterConfig} from '@angular/router';

import {Home} from './home.component/home.component';
import {Login} from './login.component/login.component';
import {Signup} from './signup.component/signup.component';
[...]
import {AuthGuard} from "./../../common/auth.guard";

export const databaseInterfaceRoutes: RouterConfig = [
    { path: '', redirectTo: 'home' },
    { path: 'home', component: Home, canActivate: [AuthGuard], outlet: 'myappinterface' },
    { path: 'login', component: Login, outlet: 'myappinterface' },
    { path: 'signup', component: Signup, outlet: 'myappinterface' },
    [...]
];

当点击上面提到的按钮尝试导航到我的应用时，错误控制台会告诉我以下内容：

未捕获（承诺）：错误：无法匹配任何路线：'home'

删除时

outlet: 'myappinterface'

来自myapp.routes我没有收到错误，我看到我的家庭组件中的组件模板被加载到网络监视器中 - 但没有显示任何内容。

我是否遗漏了一些重要信息以使我的路由工作正常或是否有更简单的方法将一个Angular 2 App集成到另一个？谢谢！

P.S。：如果我错过了重现的重要信息，请告诉我。

在现有App中集成路由的Angular 2 App

0 个答案: