Question

我正在使用angular 6开发Web应用程序。我的应用程序包含一个user-information组件，一个results组件，一个api服务和一个data服务。想法是，用户在文本框中输入电子邮件地址并按下按钮。按下该按钮后，我将处理用户信息组件中的电子邮件并将其放入数组中，然后从结果组件中调用一个函数，然后使用该数组在api服务中进行api调用，然后订阅该函数数据。我终于得到了结果，现在我想使用/results服务中的数据在路径data上呈现这些结果。

经过所有处理以获得结果后，我尝试了

this.router.navigate(['/results'])

，但不起作用。我不确定如何正确执行此操作。我已经看完了路由教程，但是对于使整个组件正常工作，我仍然感到困惑。

我的结果组件看起来像：

@Component(
{
    selector: 'app-results',
    templateUrl: './results.component.html',
    styleUrls: ['./results.component.css'],
    providers: [ApiService, DataService]
})
export class ResultsComponent implements OnInit
{
    constructor(private _apiService: ApiService, private router: Router, private _dataService: DataService)
    {
        this.userResults = this._dataService.getData();
    }
displayedColumns: string[] = ['User Email', 'Result'];
userResults = [];
employeeCheck(user: string)
    {
        console.log('Completing employee check')

        if (this)
        { 
            this.userResults.push({
                key: user,
                value:  this.messages[3];
            });
            this.createTable();
        }
        else if (this)
        { //Check that NGP exists and is valid
            this.userResults.push({
                key: user,
                value:  this.messages[4];
            });
            this.createTable();
        }
        else if (this)
        { 
            this.userResults.push({
                key: user,
                value:  this.messages[6]
            });
            this.createTable();
        }

        else if (this)
        { 
            this.userResults.push({
                key: user,
                value:  this.messages[5]
            });
            this.createTable();
        }
        else
        { //Don't know what else to do
            this.userResults.push({
                key: user,
                value:  this.messages[7]
            });
            console.log(this.userResults[0].key)
            this._dataService.saveResults(this.userResults);
            this.createTable();
        }
//console.log(this.userResults);

    }


    userCheck(user: string)
    {
        console.log('Checking ', user, ' information.');

        if (this)
        {
            this.userResults.push({
                key: user,
                value:  this.messages[0]
            });
            this.createTable();
        }
        else if (this)
        {
            this.userResults.push({
                key: user,
                value:  this.messages[1]
            });
            this.createTable();
        }
        else if (this)
        {
            this.userResults.push({
                key: user,
                value:  this.messages[2];
            });
            this.createTable();
        }
        else
        {
            this.employeeCheck(user);
        }
    }
createTable()
    {
        console.log(this.userResults)
        console.log('going to results')
        this.router.navigate(['/results'])      
    }

我的服务如下：

import { Injectable } from '@angular/core';
import { Observable, Subject, throwError} from 'rxjs';

@Injectable({ providedIn: "root" })
export class DataService {
    private results: any[];
    constructor() { }

    saveResults(someArray){
        console.log('saving results')
        this.results = someArray
        console.log(this.results)
    }
}

从我的app.module.ts

const appRoutes: Routes = [
 {path: "", redirectTo: "", pathMatch: "full"},
 {path: "", component: UserInformationComponent },
 {path: "results", component: ResultsComponent }
];

我想在端点/results上显示我的结果

Answer 1

似乎路由配置格式错误。试试吧。

const appRoutes: Routes = [
 {path: "", component: UserInformationComponent, pathMatch: "full"},
 {path: "results", component: ResultsComponent }
];

如何呈现html

1 个答案: