javascript - 在JS文件中使用组件的成员变量

Question

如何以 Angular 方式访问 js 文件内组件的变量？

示例:

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor() {}

}

现在如何访问文件中的 title 变量，例如 sample.js？

Answer 1

啊，第一轮就误读了我手机上的问题。

这更简单一些。如果其他人对此事有任何意见，我肯定有兴趣了解解决此问题的其他方法。

您需要将 script.ts 设置为可注入(inject)类(或服务)，以便在应用程序的其他元素中呈现输出。然后，该服务必须在应用程序级别或您将资源传递给的子级树上注册为提供者。

如果您需要 script.js，则需要使用该服务作为中介，因为该服务充当单例，您可以通过它提供资源。

此外，您从中传递资源的组件需要在您传递到的组件上或在 app.modules 中注册为提供者

// my.service.ts

@Injectable()
export class MyService {
    passedVar;
    otherPassedVar;

    constructor(myComponent: MyComponent) {
       // Do something with the variables from my component
       this.passedVar = myComponent.resource;
       this.otherPassedVar = myComponent.getOtherResource();
    }
}

// my.component.ts

// decoration excluded for brevity
export class TestComponent {
    resource = 'some resource this is';

    getResource() {
        return 'this is some other resource';
    }
}

// other.component.ts

@Component({
   selector: '....',
   template: `{{ res1 }} <br> {{ res2 }}`,
   providers: [MyService, MyComponent]
})
export class OtherComponent {
    res1;
    res2;
    constructor(myService: MyService) {
        this.res1 = myService.passedVar;
        this.res2 = myService.otherPassedVar;
    }
}