Угловой обмен данными между двумя компонентами

Question

Я пытаюсь передать значение из одного сервиса в другой компонент, но результат значения отображается как неопределенный

Injectable()
export class TestService {
 url:string;

someExample(){
this.url="Hello";
}



@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {

  constructor(private test: TestService,
              ) { }

  doTest(){    
   console.log("CheckingValue"+ this.test.url)
  }
}

Как установить значение URL, чтобы я мог получать его на другом компоненте? Я новичок в угловой Я вижу в консоли this.test.url значения отображаются как неопределенные

Answer 1

Используйте Observable, чтобы подписаться на изменения:

import { Observable, of } from 'rxjs';

Injectable()
export class TestService {
 url:string;

someExample(): Observable<string>{
 return of (this.url="Hello");
}

И получить / подписаться на него в компоненте:

this.testService.someExample().subscribe(result => {
 console.log(result);
});

Если значение изменяется в службе, вы получите обновленное значение в компоненте.

Answer 2

вы вызываете переменную, просто определяя ее, чтобы она была по умолчанию undefined, поэтому вызовите метод, который добавил к ней значение.

просто добавьте return в ваш someExample () метод

someExample() {
   return  this.url="Hello";
}

Example.component.ts

doTest() {    
  console.log("CheckingValue"+ this.test.someExample())
}