如何对angular 6中的所有组件使用通用类URL？

Question

我有一个公共类，并且所有组件中都导入了该公共类，并且所有组件中都使用了该公共类url，但是此commonUrl无效，因此如何使所有组件成角度形式使用commonUrl（因为将来我有仅在commonUrl的common-class中进行更改？

export class CommonClass {
  constructor(commonUrl : string = 'http://localhost:3000'){}
}

category.component.html

<button mat-button><img src="commonUrl/{{categoryObj.categoryimage}}" style="height: 100px;width: 100px;"/></button>

follow.component.html

 <td mat-cell *matCellDef="let element"> 
   <img src="commonUrl/{{element.userimage}}" style="height: 40px;width: 40px;"/>
 </td>

Answer 1

最好创建一个静态变量来访问通用网址

//Companion object
object MyApi {
  def apply(arg1, ...) {
      val myApi = new MyApi(arg1, ...)
      MyThriftService.ServicePerEndpoint(
         method1 = myApi.method1,
         ...
         methodX = myApi.methodX
      )
    }
  }

在category.component.ts中访问属性

export class CommonClass {
  public static commonUrl : string = 'http://localhost:3000'
}

Answer 2

在您的Long文件中，添加URL的提供程序。您的代码应如下所示

app.module.ts

，并且必须在您的组件中注入

@NgModule({
   declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        ...........
    ],
    providers: [
        ........
        //use this line   
        { provide: 'API_URL', useValue: 'http://localhost:3000' },
    ]
})

现在您可以在组件的任何位置使用该URL

Answer 3

首先，您需要在组件中导入类，然后在视图中创建该类的实例

这是一个例子

在.ts

中

import {CommonClass} from ../yourfolder/commomurl

commonClassObj: CommonClass = new CommonClass();

和.html

中

<button mat-button><img src="{{commonClassObj.commonUrl}}/{{categoryObj.categoryimage}}" style="height: 100px;width: 100px;"/></button>

Answer 4

如果什么都不起作用的另一种方法：使用OUTPUT发出值

 @Output() commonUrl : EventEmitter<Boolean> = new EventEmitter<Boolean>();

在定义commonurl的主类中发送它

this.commonUrl.emit(goToAccountView);

并在要使用此commonURL的组件中使用@Input（）。

希望有帮助

Answer 5

最好的方法是使用文件夹environnements中的文件。

在文件environnement.dev.ts中：

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000',
};

消费环境变量：

import { environment } from '../../environments/environment';

在您的组件中：

apiUrl = environment.apiUrl;