Angular2 ne Peut pas se lier à la DIRECTIVE, car il n'est pas connu de la propriété de l'élément
J'ai généré un nouveau @Directive Angulaire de la CLI, il a été importé à mon application.le module.ts
import { ContenteditableModelDirective } from './directives/contenteditable-model.directive';
import { ChatWindowComponent } from './chat-window/chat-window.component';
@NgModule({
declarations: [
AppComponent,
ContenteditableModelDirective,
ChatWindowComponent,
...
],
imports: [
...
],
...
})
et j'essaie de l'utiliser dans mon composant (ChatWindowComponent)
<p [appContenteditableModel] >
Write message
</p>
même si, dans la directive n'est Angulaire de la CLI code généré:
import { Directive } from '@angular/core';
@Directive({
selector: '[appContenteditableModel]'
})
export class ContenteditableModelDirective {
constructor() { }
}
J'ai obtenu l'erreur:
de la zone.js:388 non Gérée Promesse de rejet: Modèle erreurs d'analyse:
Ne peut pas se lier à 'appContenteditableModel', car il n'est pas connu de la propriété de 'p'.
J'ai essayé presque tous les changements possibles à la suite de cette angulaire docs tout devrait fonctionner, mais il ne le fait pas.
Toute aide?
- Le résultat que j'ai besoin est
[(appContenteditableModel)]="draftMessage.text"
à la fin... - Ensuite, essayez comme ceci
<p [appContenteditableModel]="draftMessage.text"></p>
- Il fonctionne sans crochets
appContenteditableModel="draftMessage.text"
et aussi(appContenteditableMode)l="draftMessage.text"
résoudre la promesse de rejet, mais il semble aussi qu'il ne passe pas la variable
Vous devez vous connecter pour publier un commentaire.
Lors de l'emballage des biens entre parenthèses
[]
vous êtes en essayant de se lier à elle. Donc, vous devez le déclarer comme un@Input
.L'important, c'est que le membre (
appContenteditableModel
) doit être nommé en tant que propriété sur le nœud DOM (et, dans ce cas, la directive sélecteur).@Input ('appContenteditableModel') model : any;
et aussi de sortie@Output ('appContenteditableModel') update : EventEmitter<any> = new EventEmitter();
dans mon directive. Il semble que le modèle fonctionne bien, mais l'émetteur appelé parthis.update.emit(value)
ne change pas la valeur du composant parent. Ce que je fais mal?[(appContenteditableModel)]="draftMessage.text"
@Output
est pour l'émission d'événements. Si vous souhaitez conserver la valeur en synchronisation avec le parent, vous pouvez envisager d'ajouter le@HostBinding
annotation.@HostBinding
aidera à conserver la valeur de synchronisation à l'intérieur de l'élément html, ai-je le droit? Cet élément, j'ai besoin d'être modifiée par l'utilisateurcontenteditable="true"
de sorte que j'ai besoin de garder en synchronisation avec la variable dans la même composante.Si vous utilisez un module partagé pour définir la directive, assurez-vous qu'il est déclaré et exportées par module est défini dans.
En somme, parce que votre directive ressemble à un d'ancrage de la directive, supprimer les crochets et cela fonctionne.
En fait, je n'ai pas trouvé les sections correspondantes concernant les crochets devraient être supprimés ou non, où la seule mention que j'ai trouvé est situé dans la section sur composants dynamiques:
qui n'est cependant pas parfaitement couverts dans le Attribut Directives document.
Individuellement, je suis d'accord avec vous, et pensait que
[appContenteditableModel]
doit être égale àappContenteditableModel
et angulaire du modèle de l'analyseur peut contourner s'il est@input()
la liaison de données ou de ne pas automatiquement, ainsi. Mais ils semblent exactement pas traité de la même façon sous le capot, même en courant Angulaire de la Version de 7.Pour moi, le correctif a été le déplacement de la directive références à partir de la racine
app.module.ts
(les lignes pourimport
,declarations
, et/ouexports
) au plus spécifique modulesrc/subapp/subapp.module.ts
mon composant appartenait à.