我想在服务中使用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
答案 0 :(得分:3)
似乎可以直接将路由器注入服务。我也试过注入根组件并传递给服务但是当直接方式工作时应该没有必要
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!)'
}
}
答案 1 :(得分:1)
当您在ExternalService
中提供bootstrap()
时,您也必须在那里提供ROUTER_PROVIDERS
。否则Angular不知道如何为Router
ExternalService.
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
ExternalService
]);
Plunker例如用法(似乎工作正常)