Как вы делаете компоненты HTML

Question

Я использую Angular 6 для разработки веб-приложения. Мое приложение состоит из компонента 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 }
];