[英]How to reuse getter method in Angular
I have angular 8 application.我有 angular 8 应用程序。
And I have a get method.我有一个 get 方法。 But this method I want to use in several components.
但是这种方法我想在几个组件中使用。
So I made a service of the getter method.所以我做了一个getter方法的服务。 But then I get some errors.
但后来我得到了一些错误。
So I have the getter method like this:所以我有这样的getter方法:
@Injectable({
providedIn: 'root'
})
export class GetProfileImageUrl {
profileImagefile: File;
constructor(private sanitizer: DomSanitizer) {}
get profileImageUrlDefault() {
return this.profileImagefile === null
? '/assets/placeholder.jpg'
: this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));
}
}
and the component looks like this, where I inject the method:组件看起来像这样,我在其中注入了方法:
constructor(
private getImageUrl: GetProfileImageUrl
) {}
get profileImageUrl() {
return this.getImageUrl.profileImageUrlDefault;
}
and the template looks like this:模板如下所示:
<img [src]="profileImageUrl" width="147px" />
But then I get this error:但是后来我收到了这个错误:
core.js:5871 ERROR TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
at GetProfileImageUrl.get profileImageUrlDefault [as profileImageUrlDefault] (get-profile-image-url.ts:15)
at ProfileInformationComponent.get profileImageUrl [as profileImageUrl] (profile-information.component.ts:86)
at ProfileInformationComponent_Template (profile-information.component.html:3)
at executeTemplate (core.js:11926)
at refreshView (core.js:11773)
at refreshComponent (core.js:13213)
at refreshChildComponents (core.js:11504)
at refreshView (core.js:11825)
at refreshComponent (core.js:13213)
at refreshChildComponents (core.js:11504)
So what I have to change?那我必须改变什么?
Thank you谢谢
So the method is working if I define it directly in the component.因此,如果我直接在组件中定义该方法,则该方法有效。 But I want to reuse the method in several components.
但我想在几个组件中重用该方法。
So if I try it like this:所以如果我像这样尝试:
profileImageUrlDefault() {
return this.profileImagefile === null
? '/assets/placeholder.jpg'
: this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));
}
and I call the method like this:我这样调用方法:
get profileImageUrl() {
return this.getImageUrl.profileImageUrlDefault;
}
I get this error:我收到此错误:
profileImageUrlDefault()%20%7B%20%20%20%20%20%20%20%20return%20this.profileImagefile%20===%20null%20%20%20%20%20%20%20%20%20%20%20%20:1 GET http://localhost:4200/profileImageUrlDefault()%20%7B%20%20%20%20%20%20%20%20return%20this.profileImagefile%20===%20null%20%20%20%20%20%20%20%20%20%20%20%20?%20%27/assets/placeholder.jpg%27%20%20%20%20%20%20%20%20%20%20%20%20:%20this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(this.profileImagefile));%20%20%20%20} 404 (Not Found)
Using a shared service is a good practice.使用共享服务是一种很好的做法。 well done.
做得好。 But I think your problem is in the way of calling the
profileImageUrlDefault()
function in your component.但我认为您的问题在于在您的组件中调用
profileImageUrlDefault()
函数的方式。 You should try this:你应该试试这个:
app.component.ts app.component.ts
constructor(cprivate getImageUrl: GetProfileImageUrl) {}
get profileImageUrl() {
return this.getImageUrl.profileImageUrlDefault();
}
Actually you missed ()
of your function call on return this.getImageUrl.profileImageUrlDefault
statement.实际上,您在
return this.getImageUrl.profileImageUrlDefault
语句时错过了()
函数调用。
So this is the soluition:所以这是解决方案:
@Injectable({
providedIn: 'root'
})
export class GetProfileImageUrl {
compWindow: any;
constructor(private sanitizer: DomSanitizer) {
this.compWindow = window;
}
profileImageUrlDefault(profileImagefile: File) {
return profileImagefile == null
? '/assets/placeholder.jpg'
: this.sanitizer.bypassSecurityTrustUrl(this.compWindow.URL.createObjectURL(profileImagefile));
}
}
and injecting in component:并注入组件:
get profileImageUrl() {
return this.getImageUrl.profileImageUrlDefault(this.profileImagefile);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.