Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(directive): translate by attribute (not binding) with translation key as value #1268

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

hosuaby
Copy link

@hosuaby hosuaby commented Nov 19, 2020

Fix for angular 9 & 10

This PR fixes the behaiviour of TranslateDirective when it is used as a simple attribute translate (not attribute binding [translate]) with value and translated element already contains some text. Example:

<div #attributeWithValue translate="TEST">Should be changed</div>
<div #attributeWithValueAndParams translate="TEST" [translateParams]="{value: 'great'}">Should be changed</div>

Currently (without this fix) this code will result in text translated twice. If value for 'TEST' in english is "This is a test", after directive is executed, value of #attributeWithValue will be "This is a testThis is a test".

There was no such problem while using ng-translate with Angular 8. But since Angular 9 it appeared.

This PR also contains some refactorings.

node.data = content;
}
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interface for listing all custom fileds used by directive

@@ -17,14 +40,12 @@ export class TranslateDirective implements AfterViewChecked, OnDestroy {
@Input() set translate(key: string) {
if (key) {
this.key = key;
this.checkNodes();
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will be called by ngAfterViewChecked

}
}

@Input() set translateParams(params: any) {
if (!equals(this.currentParams, params)) {
this.currentParams = params;
this.checkNodes(true);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will be called by ngAfterViewChecked

} else if (node.originalContent) { // the content seems ok, but the lang has changed
// the current content is the translation, not the key, use the last real content as key
key = node.originalContent.trim();
} else if (content !== node.currentValue) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code block completelly diplucates the first one


@Injectable()
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pipe no need to be injectable

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {TranslateModule, TranslateService} from '../src/public_api';

@Injectable()
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Compoenent not need to be injectable.

@hosuaby hosuaby changed the title FIX: translate by attribute (not binding) with translation key as value fix(directive) translate by attribute (not binding) with translation key as value Mar 12, 2021
@hosuaby hosuaby changed the title fix(directive) translate by attribute (not binding) with translation key as value fix(directive): translate by attribute (not binding) with translation key as value Mar 12, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant