有角度地在两个组件之间共享数据

Question

I am trying to share a value from one service to another componet but the value result is showing as undefined

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)
  }
}

How do I set url value so that I can receive on another component? I am new to angular I can see in console this.test.url values is showing as undefined

Answer 1

you are calling a variable by just defining it so it's by default undefined , so call a method which added a value to it.

just add return in your someExample() method

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

Example.component.ts

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

Answer 2

Use Observable to subscribe for changes:

import { Observable, of } from 'rxjs';

Injectable()
export class TestService {
 url:string;

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

And get/ subscribe for it in the component:

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

If the value changes in the service, you will get the updated value in the component.