значение прохождения между двумя компонентами (страниц) в угловых 2

Question

Я использую Угловое 2 (машинопись)

У меня есть два компонента (на самом деле они являются две страницы тоже). Они НЕ являются родительскими и дочерними отношениями.

Я хочу передать значение второму компоненту (странице), когда я нажимаю ссылку в первом компоненте (странице).

Я знаю «параметры URL» через маршрутизатор. Но я не хочу показывать этот параметр в ссылке. Есть ли другой путь?

Спасибо!

Answer 1

Канонический способ состоит в том, чтобы установить услугу injectable и ввести услугу в любые компоненты, которым нужны данные. Поскольку служба является одноэлементной, компоненты будут получать доступ к тем же данным. Не имеет значения, что они находятся на разных страницах. Plunker here.

Edit: Вот более сложный пример, который показывает двустороннюю связь между компонентами, подписавшись на EventEmitter на службу: Plunker

import {Component, Injectable} from 'angular2/core' 

// your shared service 
// provide reference in parent component or bootstrap 
@Injectable() 
export class myService { 
    sharedData:string = "String from myService" 
} 

@Component({ 
    selector: 'page1', 
    providers: [], 
    template: ` 
    <div> 
     <b>Component Page1 - shared data:</b> {{SharedData}} 
    </div> 
    `, 
    directives: [], 
}) 
export class Page1 { 
    constructor(aService: myService) { 
    this.SharedData = aService.sharedData 
    } 
} 

@Component({ 
    selector: 'page2', 
    providers: [], 
    template: ` 
    <div> 
     <b>Component Page2 - shared data:</b> {{SharedData}} 
    </div> 
    `, 
    directives: [], 
}) 
export class Page2 { 
    constructor(aService: myService) { 
    this.SharedData = aService.sharedData 
    } 
} 

Answer 2

Спасибо MarkM! Это работает, но это было трудно для меня, потому что у меня есть все это в Diferent файлов и по сравнению с прошлым angular2 использованием угловой консоли ... Так я объясню здесь:

Прежде всего: Вам нужно создать файл с классом вы хотите поделиться с другими компонентами: data.service.ts и сделать его «@Injectable»:

import { Injectable } from '@angular/core'; 

@Injectable() 
export class myService { 
    public sharedData:string; 

    constructor(){ 
    this.sharedData = "String from myService"; 
    } 

    setData (data) { 
    this.sharedData = data; 
    } 
    getData() { 
    return this.sharedData; 
    } 
} 

Убедитесь, что вы установили созданный класс (MYSERVICE) на «поставщиков» только один раз app.module.ts файл и импортировать файл для инъекций: data.service.ts:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { routing, appRoutingProviders } from './app.routing'; 
import { AppComponent } from './app.component'; 
import { AppContent } from './components/content.component'; 
import { AppInsertContent } from './components/insert.component'; 
import { myService } from './services/data.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    AppContent, 
    AppInsertContent, 
    ], 
    imports: [ 
    BrowserModule, 
    routing 
    ], 
    providers: [appRoutingProviders, myService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Везде, где вы хотите использовать ваш общий класс использовать конструктор для создания объекта из класса (этот объект будет уникальным для компонентов, благодаря @Injectable декоратор). Не забудьте импортировать его на каждый файл, который вы используете его ...

В моем случае эта точка зрения устанавливает данные объекта с ввода текста: input.component.ts

import { Component } from '@angular/core'; 
import { myService } from '../services/data.service'; 

@Component({ 
    selector: 'insert-content', 
    template: ` 
    <input id="textbox" #textbox type="text"> 
    <button (click)="this._myService.setData(textbox.value); SharedData = textbox.value;">SAVE</button> 
    Object data: {{SharedData}} 

    <div class="full-button"> 
     <a routerLink="/" routerLinkActive="active">BACK</a> 
    </div> 
    ` 
}) 

export class AppInsertContent { 
    SharedData: string; 
    constructor (private _myService: myService){ 
    console.log(this._myService.getData()); 
    } 
} 

И в это мнение я просто увидеть данные, которые были установлены на объекте: content.component.ts

import { Component } from '@angular/core'; 
import { myService } from '../services/data.service'; 

@Component({ 
    selector: 'app-content', 
    template: ` 
    <div style="float:left; clear:both;"> 
    {{_myService.getData()}} 
    </div> 

    <div class="full-button"> 
    <a routerLink="/insert" routerLinkActive="active">INSERT</a> 
    </div> 
    ` 
}) 
export class AppContent { 
    constructor (private _myService: myService){ 
    console.log(this._myService.getData()); 
    } 
} 

Я надеюсь, что эта информация является полезным!