Question

我想在服务中使用Router对象以允许导航到我的不同路由。

我的AppComponent看起来像这样：

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
}

function uploadFiles(form) {

  try {

    var dropbox = "Submissions";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(submissions);
    }

    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);

    return "File uploaded successfully " + file.getUrl();

    //pass data to spreadsheet
    processForm(YOUR_VARIABLES)

  } catch (error) {

    return error.toString();
  }

}
function processForm(YOUR_VARIABLES) {

  var Name = name;
  var email = email;


  var ss = SpreadsheetApp.openById(SPEADSHEET_ID); 
  var sheet = ss.getSheetByName(SHEET_NAME);

  //Change this depending on the order and number of inputs to be recorded
  sheet.getRange(sheet.getLastRow()+1, 1, 1, 5).setValues([[Name,email]]);  
}

和ExternalService：

@Component({
    selector: "app",
    templateUrl: "app/app.html",
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {
    path: "/home",
    name: "Homepage",
    component: HomepageComponent,
    useAsDefault: true
  },{
    path: "/home2",
    name: "Homepage2",
    component: HomepageComponent2
  }
])
export class AppComponent {
    constructor (private _externalService: ExternalService) {}

}

此代码失败说我无法在ExternalService中实例化路由器。我估计这是由于RouteConfig在那里不可用。我还尝试在@Injectable() export class ExternalService { constructor (_router: Router) {} ... }构造函数中添加_router: Router，它在那里工作。如何在AppComponent中使用路由器实例？

编辑：这是我的应用程序的引导程序文件：

ExternalService

Answer 1

似乎可以直接将路由器注入服务。我也试过注入根组件并传递给服务但是当直接方式工作时应该没有必要

import {Component, Injectable, provide} from '@angular/core';
import {Router, Routes, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router';
import {LocationStrategy, HashLocationStrategy} from '@angular/common'; 

@Injectable()
export class ExternalService {
  //router:Router;
    constructor (private router: Router) {}

    navigate() {
      this.router.navigate(['/article']);
    }
}


@Component({
  selector: 'root',
  template: `
  <h2>Root</h2>
  `,
})
export class RootComponent {
}


@Component({
  selector: 'article',
  template: `
  <h2>Article</h2>
  `,
})
export class ArticleComponent {
}


@Component({
  selector: 'my-app',
  providers: [ExternalService, ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})],
  directives: [ROUTER_DIRECTIVES],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <router-outlet></router-outlet>
    </div>
    <button (click)="externalService.navigate()">Article</button>
  `,
})
@Routes([
  { path: '/article', component: ArticleComponent },
  { path: '/', component: RootComponent }
  ])
export class App {
  constructor(private externalService: ExternalService) {
    //externalService.router = router;
    this.name = 'Angular2 (Release Candidate!)'
  }
}

Plunker example

Answer 2

当您在ExternalService中提供bootstrap()时，您也必须在那里提供ROUTER_PROVIDERS。否则Angular不知道如何为Router

实例化ExternalService.

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    ExternalService
]);

Plunker例如用法（似乎工作正常）

Angular2在可注入服务中使用路由器

2 个答案: