Wykonuje aplikacje w Angularze jednak mam problem z przesylaniem informacji miedzy komponentami a w zasadzie komunikacji miedzy nimi.Od razu mowie ze nie mam doswiadczenia wiec prosze o wyrozumialosc ;-) co do przedstawionego kodu jak i potendjalnych pytan.
Przedstawie tu uproszczony model zamiast wrzucac mase kodu ale problem ten sam.
Komponent First bedzie sluzyl do logowania i cos wyswietlal a komponent Second do pobierania danych i tez cos tam wyswietlal tak sobie to wymyslilem.Stworzylem serwis Communication jak nazwa mowi do komunikacji
Kod first.component.ts
import { Component, OnInit } from '@angular/core';
import { CommunicationService } from '../communication.service';
@Component({
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
val_first="pierwszy komponent";
constructor(private communication: CommunicationService) { }
changeVal():void{
this.communication.changeSecVal(this.val_first);
console.log("First wartosc: " + this.val_first);
}
ngOnInit(): void {
}
}
first.component.html
<p>First</p>
<button (click)="changeVal()">Wcisnij</button>
Kolejny komponent
second.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-second',
templateUrl: './second.component.html',
styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
var_second ="wartosc";
constructor() { }
setVar(val:string):void{
this.var_second = val;
console.log("Second wartosc: " + this.var_second);
}
ngOnInit(): void {
}
}
second.component.html
<p>Second</p>
<p>{{var_second}}</p>
Serwis
communication.serwis.ts
import { Injectable } from '@angular/core';
import { SecondComponent } from './second/second.component';
@Injectable({
providedIn: 'root'
})
export class CommunicationService {
constructor(private sec: SecondComponent) { }
changeSecVal(val:string):void{
this.sec.setVar(val);
console.log("Communication wartosc: " + val);
}
}
Moduł
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
@NgModule({
declarations: [
AppComponent,
FirstComponent,
SecondComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [SecondComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Jak widac model działania, wciskam przycisk w pierwszym komponencie i chcialbym aby w w yniku tego sygnału przekazywana informacja wykonywała/rozpoczynała cos w drugim komponencie.W tym przypadku ustawiała zmienna( to jedynie przyklad).I teraz jak powrzucałem "logi" to widze ze wartosc jest przekazywana tak jak planowąłem ale w zmienna w html komponentu second sie nie zmienia i tego nie rozumiem mimo ze logi wyswietla ze zmienna ma przekazana wartosc.Nie rozumiem dlaczego tak sie dzieje
Słowem dopowiedzenia.Jak odpalilem to bez zmian w app.module.ts to otrzymałem bład w konsoli
core.js:5980 ERROR NullInjectorError:
R3InjectorError(AppModule)[CommunicationService -> SecondComponent -> SecondComponent -> SecondComponent]:
NullInjectorError:
No provider for SecondComponent!
Wiec dodałem bez przekonania wpis w app.module.ts -> @NgModule-> providers[DaneComponent] i usunłą sie bład.I teraz nie ma błedu ale nie wykonuje tego w taki sposob jak bym oczekiwał.
Wydaje mi sie ze jednak to nie jest poprawne miejsce do podawania kompnentu .Miejsce providers[] chyba jest przeznaczone do podawania serwisu
Ogolnie byłbym wdzieczny jakby ktos podrzucil kilka słow wyjasnienia dlaczego to nie działa "jak powinno" albo w jaki sposob osiagnac odpowiedni efekt