angular - 继承 Typescript 中的 Observable 主题

Question

我在继承的 Typescript 中使用 Subject 和 Observable。

他们是基类 -

class Animals{
   val: string = 'not present';
   val1: string= 'not present 1'; 
   subject: Subject<string> = new Subject();  

   data = Observable.create(obs => {
        obs.next('Ohla ! me created');
      })
  constructor(){
       this.subject.subscribe(data=>this.val = data)
       this.subject.subscribe(data=>this.val1 = data)
    }
}

这是继承类

class Horse extends Animals {
   val2: string = 'not present 3';

  constructor(){

        super();
        this.subject.subscribe(data=> this.val2 = data);
        this.data.subscribe(this.subject);   
    }
}

由于预期的结果是 -

 val='Ohla ! me created';
 val1='Ohla ! me created';
 val2='Ohla ! me created';

问题是 - val 和 val1 只能访问 TS 文件。我没有进入 UI，即在 HTML 中出现{{val}} {{val1}}默认值。

任何帮助将不胜感激。