无法绑定到指令，因为它不是元素Angular AOT的已知属性
是一个错误信息，通常在使用Angular的AOT（Ahead of Time）编译时出现。这个错误信息表示在模板中使用了一个未知的属性或指令，导致编译器无法识别并绑定。
解决这个错误的方法是检查模板中使用的属性或指令是否正确，并确保它们在当前的上下文中是可用的。以下是一些可能的解决方案：
- 检查模板中的属性拼写：确保属性的拼写是正确的，包括大小写和连字符。
- 确保属性或指令存在于组件或模块中：如果使用了自定义属性或指令，确保它们已经在组件或模块中声明和导入。
- 检查版本兼容性：某些属性或指令可能只适用于特定版本的Angular。确保你正在使用与属性或指令兼容的Angular版本。
- 检查模板语法：确保模板中的属性或指令使用了正确的语法，比如使用方括号绑定属性，使用圆括号绑定事件等。
如果以上方法都没有解决问题，可以尝试在搜索引擎或Angular的官方文档中查找相关的错误信息，以获取更详细的解决方案。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动应用开发平台（MADP）：https://cloud.tencent.com/product/madp
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
在我的angular应用程序中，后端用户可以创建自定义模板。这些自定义模板需要在angular应用程序中的特定位置加载。我有一个自定义指令，它从CMS获取模板(基于路由)，并将其注入到我的angular应用程序中。如果我把它放到innerHTML中，组件将无法正确呈现。我需要componentFactoryResolver和compiler来正确显示组件。
上面的解决方案不适用于AOT编译。有没有其他方法可以让我实现同样的目标并利用AOT？服务器端渲染是解决这个问题的唯一方法吗？
浏览 0提问于2017-03-04得票数 0
我有用户名单。我希望当光标在按钮上悬停时，它将*ngIf设置为true，然后显示有关用户的信息(当光标离开按钮时显示为false )。
user-list.html**:**
<div *ngFor="let user of users">
<h1>{{user.name}}</h1>
<div onUserHover *ngIf="ngIf">
<p>{{user.description}}</p>
</div>
</div>
user-list
浏览 4提问于2017-03-31得票数 1
1回答
将数据从组件传递到指令
、、、
我有以下指令代码：
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({ selector: '[while]' })
export class WhileDirective {
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef)
{ }
@Input() a
浏览 1提问于2018-02-28得票数 0
我试图在我的项目中使用不同模块中的一个子组件，但是我收到的错误“无法绑定到”message“，因为它不是”或-app-wysiwyg“的一个已知属性。我看不到任何问题，我的导入，我已经检查我的表单模块已被正确添加。我相信问题是与选择器有关，但到目前为止，我所尝试的一切都无法消除错误。
Wysiwyg.Component.ts
import { Component, OnInit} from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@
浏览 3提问于2020-03-09得票数 0
回答已采纳
2回答
我有个天真的问题。假设我定义了一个输入元素，如下所示：
<input [(ngModel)]=model.username name="username" id="username">
上面的内容实质上意味着现在在输入元素上定义了一个名为属性的ngModel属性，该属性又被绑定到model.username。目前为止一切都很好。
现在，仅为了学习目的，我访问输入元素如下：
let input = document.getElementbyId('username');
然后试着检查像input.ngModel...boom...the
浏览 2提问于2017-02-19得票数 1
回答已采纳
1回答
尝试跳入角形2，有一些角度1的经验和一些谜题。
我做了一个共享模块：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Constants } from './injectables/constants';
import { Utils } from "./injectables/utils";
import { HighlightDirective }
浏览 4提问于2016-11-03得票数 1
回答已采纳
1回答
在带提前(AOT)编译的Angular 2中，我有一个父组件和一个子组件，如下所示：
<div>
<h1>I am a parent</h1>
<myChild *ngIf="showChild"></myChild>
</div>
我知道子模板是动态插入到DOM中的。
如果showChild的计算结果为false，Angular到底什么时候销毁该子组件？或者Angular会完全销毁子组件吗？是时间角度调用了onDestroy()方法吗？
浏览 1提问于2017-04-06得票数 32
回答已采纳
2回答
我希望像这样在指令中设置默认值，但它将为null
(function(angular) {
'use strict';
angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
}])
.directive('myDialog', function() {
return {
restrict: 'E',
t
浏览 2提问于2015-09-01得票数 1
回答已采纳
我正在尝试创建一个Angular structural指令，它将只对特定的HTML元素(div)可用。
但是，当我尝试将结构指令选择器设置为div[nameOfDirective]时，出现错误：“无法绑定到'nameOfDirective‘，因为它不是’div‘的已知属性。”
如果选择器只是属性[nameOfDirective]，那么它工作得很好。
我已经创建了一个模拟错误的柱塞：
由于发生编译错误，柱塞将不会预览。打开控制台查看。
如果您更改文件restricted-element.directive.ts中的指令选择器，它将正常预览。
是我做错了什么，还是有个bug？
浏览 4提问于2020-04-22得票数 1
在到目前为止发布的Angular 2预览版中，标记的语法已经从ng-前缀修改为方括号和方括号。
而在此之前，人们会有：
<input ng-model="userName" />
<button ng-click="btnClick()">Run</button>
新的语法是：
<input [value]="userName" />
<button (click)="btnClick()">Run</button>
有没有人知道这个语法是否是/将是强制性的，
浏览 0提问于2015-01-13得票数 25
回答已采纳
在角2分量中，我有authbox.component.ts
import {Component} from 'angular2/core';
import {COMMON_DIRECTIVES} from 'angular2/common';
import {Credentials} from './credentials'
@Component({
selector: 'authbox',
template: `<div>
<div class="login-panel&#
浏览 0提问于2016-03-11得票数 52
回答已采纳
我创建了一个示例项目，在其中我使用了组件，一个带有注册名，另一个具有登录名，同时验证注册页面，给出下面提到的错误。
当表单验证时，错误发生。
>Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("
</div>
<div>
<input type="email" name="emailId" pla
浏览 1提问于2018-03-23得票数 2
回答已采纳
2回答
如何像在物质排序中使用"id“那样注入动态值？当我尝试使用插值时，mat-sort-header会导致错误-无法绑定到“mat-排序-头”，因为它不是“th”的已知属性。
表是动态生成的。
<table matSort (matSortChange)="sortData($event)">
<tr>
<th mat-sort-header="{{mapped.id}}" id="{{mapped.id}}">{{mapped.header}}</th>
</tr>...
&
浏览 3提问于2018-02-01得票数 1
1回答
此代码正在引发异常。
未明错误:模板解析错误:无法绑定到'ngforOf‘，因为它不是一个已知的属性’垫卡‘。1.如果“垫卡”是一个角度部件，并且有“ngforOf”输入，则验证它是该模块的一部分。
div
button(mat-raised-button, color='primary', (click)='createMocked()') Create Mocked
div
mat-card.Class(*ngfor="let room of rooms; let classroomIndex = inde
浏览 0提问于2019-04-21得票数 0
回答已采纳
我仍然是Angular的新手，所以如果这是一个愚蠢的问题，我道歉…我有一个使用转换的自定义指令，我试图理解为什么当我将ng-controller分配给父元素时，数据绑定会起作用，而当我直接将控制器分配给它时，数据绑定就不会起作用：
代码：
angular.module('HelloWorld', [])
.controller('HelloController', function($scope) {
$scope.name = 'you'
})
.directive('hello', function() {
ret
浏览 34提问于2016-08-17得票数 2
回答已采纳
2回答
角2模块进口
、、
我有这样的主模块，在这里我导入了基本库：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MaterialModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http
浏览 2提问于2017-02-22得票数 1
回答已采纳
考虑到下面的代码，我试图理解三种不同的数据绑定方式之间的区别。因为我是angular4新手，所以我需要澄清一下什么时候该使用什么。例如，为了分配ngModel，使用了(ngModel)。若要分配禁用属性，请使用“禁用”。若要分配ngSubmit处理程序，则使用(ngSubmit)。很难区分其中的每一个。
<section class="sample-app-content">
<h1>Template-driven Form Example:</h1>
<form #f="ngForm" (ngSub
浏览 5提问于2018-01-10得票数 0
回答已采纳
在我们的角4.3.2项目中，我们有一个指令，.trim()的各种类型的输入。全部：
import { Directive, ElementRef, forwardRef, HostBinding, Renderer2 } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
const TRIM_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: f
浏览 2提问于2017-07-31得票数 0
回答已采纳
我正在创建一个非常简单的自定义指令，并试图通过使用'<‘符号将一个简单的字符串变量从父作用域传递到自定义指令隔离作用域。然后，我尝试在自定义指令控制器中为变量分配一个新值，并在模板中显示新值，但它仍然显示旧值。
这是我的父控制器：
(function(){
angular.module("app").controller("ctrl", ctrl);
function ctrl(){
ctrl = this;
ctrl.fullname = "Paul G.";
浏览 1提问于2017-11-17得票数 0
HTML代码：
<div ng-controller="MyController">
<div>{{ hello }}</div>
<div my-terminal>{{hello}}</div>
</div>
JS代码：
const app = angular.module('app', [])
app.controller('MyController', function ($scope) {
$scope.hello = 'Hello,
浏览 0提问于2018-08-31得票数 1
回答已采纳
我正在尝试为指令编写测试，所以我使用$compile手动构建它。(是的，我知道我可以使用e2e测试，但在本例中，我想测试一些独立于DOM的逻辑，所以我使用单元测试方法。)
我有一个用scope: {foo: '='}绑定到的字段。当我试图在指令的作用域上设置它时，我得到了以下错误：
Error: Non-assignable model expression: undefined (directive: foo)
at Error (<anonymous>)
at $get.parentSet (https://ajax.googleapis.com
浏览 0提问于2012-11-28得票数 16
回答已采纳
我已经编写了显示error类的属性指令。
import { Directive, ElementRef, Renderer, Input, HostBinding } from '@angular/core';
import { FormControl } from '@angular/forms';
@Directive({
selector: "[appErrorClass]"
})
export class ErrorClasseDirective {
@Input('control') control: Form
浏览 0提问于2019-01-08得票数 0
1回答
我正在为Angular上的一个类编写代码，我不明白为什么从我的组件中提取@Input装饰器会导致整个应用程序无法加载。
import { Component, OnInit, Input } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
import { Params, ActivatedRoute } from '@angular/router&
浏览 37提问于2018-06-07得票数 -1
回答已采纳
我有一个自定义指令，它的目的是呈现一个小部件并将其绑定到一个变量。每个变量都有不同的数据类型，因此将根据数据类型显示不同的小部件。
我的问题是，我可以传递变量的数据，但无法将小部件绑定到它。
为了简化这个问题，我的小部件只是一个简单的文本输入。当我尝试$compile这个小部件时，Angular使用变量的值而不是绑定到它。
HTML：
<body ng-app="app" ng-controller="myCtrl">
<input type="text" ng-model="resource.name"&g
浏览 8提问于2013-12-05得票数 2
回答已采纳
1回答
我在将更新$scope.modalClick绑定到scope.modalClick时遇到了问题，我认为使用作用域{ modalClick:"=“}可以修复它，但它没有。如何实现从子作用域(范围)到父作用域($scope)的双向绑定。
这是我的标记
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="
浏览 4提问于2014-05-09得票数 0
提前编译(或AoT)是Angular2提供的一个特性.但我在官方网站上找不到很好的解释。
有人能给它下个明确的定义吗？
浏览 3提问于2016-09-14得票数 7
2回答
指令：
angular.module('myApp')
.directive('rankingTags', function() {
return {
restrict: 'E',
scope: {},
controller: function($scope) {
$scope.updateTagList = function(tag) {
console.log('updateTagList function called') // never
浏览 2提问于2015-09-15得票数 4
回答已采纳
1回答
我目前正在尝试用茉莉花测试一个角指令。
下面是一个简单的示例，说明正在测试的指令是什么样子：
angular.module('app', []).directive('testDirective', [
function() {
return {
restrict:'A',
scope: {
myAttr: '@'
},
link: function(scope, element, attrs) {
element.html(scope.m
浏览 2提问于2014-08-07得票数 1
回答已采纳
1回答
我有以下从服务器接收的数据
{
name: "Sam {{{{aaa}}}}"
}
在angular中，我使用以下代码将其打印出来
<span>{{name}}</span>
预期输出为
<span>Sam {{{{aaa}}}}</span> <!-- I dont want the curly braces here to act as a variable -->
但它抛出了一个错误。看起来Angular也在尝试插入字符串name。如何告诉Angular将其视为惰性字符串而不是变量？
我还探索了使用自定义
浏览 0提问于2016-03-01得票数 0
2回答
在本教程中
https://www.sitepoint.com/practical-guide-angular-directives/
我正在学习如何创建一个定制的指令。我按照下面发布的代码中所示的步骤执行，但是在运行命令时，尽管添加了上述网站中解释的确切代码
ng serve --open
我得到了一些东西，如下图所示。请让我知道为什么myCustomIf不工作。我说myCustomIf不起作用是因为我在本地主机上得到的东西:4200是一些东西，如贴出的图片所示
请让我知道如何使myCustomIf工作，如本教程在上述张贴的链接中解释。
app.component.ts
import { C
浏览 2提问于2021-04-02得票数 0
回答已采纳
我使用了text-angular来获取用户的输入。下面的代码不会验证输入
<div text-angular ng-pattern="/^[a-zA-Z0-9\-\s]+$/" name="description" ng-minlength="100" ta-min-text="100" required>
</div>
<p ng-show="jform.description.$invalid && !jform.description.$pristi
浏览 6提问于2016-01-15得票数 0
这是我的指令：
module.directive('iconSwitcher', function() {
return {
restrict : 'A',
link : function(scope, elem, attrs) {
var currentState = true;
elem.on('click', function() {
console.log('You clicked me!');
if(currentS
浏览 3提问于2015-04-16得票数 0
回答已采纳
2回答
我在一个模块中有两个指令。我想访问从A指令到B指令。因为A指令应该在B‘’scope中使用。一条指令：
angular.module('main').directive('ADirective', function () {
return {
restrict: 'EA',
templateUrl:'kk.html',
controller: function ($scope) {
$scope.usedParameter="test&#
浏览 2提问于2015-08-07得票数 0
角2提供了许多内置组件.比如NgIf，NgFor，NgStyle，NgNonBindable.有些组件与“*”一起使用，例如*ngIf和*ngFor：
<div *ngFor="item of items">
{{item}}
</div>
其中一些与“[]”一起使用，例如ngStyle和ngClass：(组件输入？)
<div [ngStyle]="{'background-color': 'yellow'}">Content</div>
其中一些被用作“角-1”：例如：
&
浏览 1提问于2016-03-16得票数 0
回答已采纳
当范围被更新时，指令的属性不会改变，它们仍然保留初始值。我在这里错过了什么？
<ul class="nav nav-pills nav-stacked" navlist>
<navelem href="#!/notworking/{{foo}}"></navelem>
<navelem href="#!/working">works great</navelem>
</ul>
<p>works: {{foo}}</p>
Javasc
浏览 6提问于2012-09-19得票数 5
回答已采纳
1回答
将HTML字符串转换为角组件
、、、、
假设我们执行API调用，在字符串中获取一些HTML。内容是HTML的，没有角，所以我必须首先把它转换成我想要的角度，然后将它编译成角。
示例API响应：
<div>
...some more html...
<h1>a header</h1>
...some more html...
<a href="somewhere.com" class="a-class" id="a-id">A Link</a>
...some more html...
</div>
我正在将其转换为
浏览 2提问于2018-11-11得票数 0
2回答
我有以下几点：
我收到一个错误，说：
compiler.es5.js:1690 Uncaught Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. (" <div class="navbar-header">
<ul class="nav navbar-nav list-inline"&
浏览 0提问于2017-08-25得票数 0
2回答
我可能对范围有点困惑(我已经阅读了很多关于它的教程，但此时我不知道如何制作这个东西)，无论如何，这就是我想要做的：
我有一张有各种牢房的桌子
<table my-table>
<tr>
<td my-table-cell>
<span ng-if="!myTableCellStatus.editing">Bla 1</span>
<input ng-if="myTableCellStatus.editing" type="text" name=&
浏览 0提问于2014-06-28得票数 0
回答已采纳
我正在编写一个指令来创建一个子菜单。
我的想法是使这个指令相当灵活，这样我就可以在需要的时候重用它。
基本概念如下：
<my-submenu>
<li my-function="test()">Test</li>
<li my-function="test2()">Test 2</li>
<li my-function="test3(id, type)">Test 3</li>
<li ui-sref="test ({id: id})
浏览 2提问于2016-06-08得票数 0
回答已采纳
我通过以下方式使用ViewChild：
@Component({
selector: 'demo',
template: `<input type="text" #firstnameCtrl [(ngModel)]="firstname" />`
})
export class DemoComponent {
public firstname: string;
@ViewChild('firstnameCtrl') firstElementCtrl: ElementRef;
}
如果有人
浏览 2提问于2018-06-04得票数 0
我有一个名为"ui-textbox“的自定义输入组件，当它的多个实例存在于一个表单-in (一个常规页面组件)中时，如果我触摸它们中的任何一个，它们都会被触摸到的，如果其中任何一个都是无效的，则无效，尽管它们没有相同的名称。注意到，当我检查它们的父窗体时，我看到表单控件具有正确的有效性和触摸状态，因此只在输入元素上添加了不正确的ng类！
TextBoxUI组件：
import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { FormC
浏览 0提问于2018-01-01得票数 0
回答已采纳
我有一个有文本框的模板，一个'span‘标签和一个'div’标签。
‘'div’标签有'selectedColor‘自定义指令。当输入值改变时，我想改变'span‘和'div’标签的背景色。
最后，我希望我的指令对输入变化做出反应，并设置'div‘标签的背景色。
我还想更改输入值更改事件的'span‘背景色。
boot.ts
import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/b
浏览 2提问于2016-01-18得票数 5
回答已采纳
我有以下HTML代码：
<div ng-controller="DemoController">
<label class="list-group-item" ng-repeat="option in DesignOptions">
<input type="radio" name="optionsRadios" value="{{option[0]}}" />
{{optio
浏览 1提问于2014-01-17得票数 0
回答已采纳
我有一些关于angular 2的@指令的问题，
1-如果选择器必须如下所示：
selector: '[validateEqual][formControlName],[validateEqual][formControl]
validateEqual必须在构造函数中，如下所示
constructor( @Attribute('validateEqual') public validateEqual: string,
@Attribute('reverse') public reverse: string) {
}
它是什么意思?什么是@Att
浏览 3提问于2016-07-01得票数 2
我是Angular2的新手。当iam绑定属性时，我通常以如下方式进行。
Example1：
<input type="number" [max]="variableName">
Example2：
<select [(ngModel)]="selectedItem">
<option *ngFor="let item of itemList" [value]="item.value" [selected]="selectedItem==item.value"&g
浏览 5提问于2017-03-23得票数 3
回答已采纳
Html：
<map street="{{firstunit.street}}"/>
组件：
@Component('CustomerService', {
templateUrl: '/CustomerService/_UnitCard/MapComponent/Map.html',
selector: 'map',
bindings: {
street: '@',
}
})
export class MapComponent {
private
浏览 0提问于2019-10-03得票数 1
我很新的角度，我读了很多线索，并谷歌这个话题，但我无法得到一个明确的答案。我真正想要达到的是。假设我有一个控制器A，这是一个实际的数据源。通过将其绑定到HTML，我将其传递给了一个指令。从这个指令中，我可以在另一个控制器上轻松地获得源。所以当控制器A的数据被改变时，我需要找出改变控制器数据的方法。
控制器A
angular.module('page.leadAndOpportunity.ctrl', []).controller('LeadAndOpportunityController', ['$scope', '$rootScope&
浏览 6提问于2016-06-16得票数 3
1回答
我对均值叠加比较陌生，我正试图在一个项目中包含一个角甘特图。根据github上的文档，我遵循了所有的步骤，但是我不断地发现一些错误。以下是我所采取的步骤的简要概述。
安装角度甘特图使用
安装角钢-甘特-保存
我使用以下方法查找依赖项：
咕噜绳
我将资产/转角-gantt.js和资产/gant.css添加到了由yo env生成的config/env/all.js文件中。
我在publlic/config.js文件中将gantt模块包含到我的角应用程序模块中
5.我还在角-甘特文件夹中发出咕噜声，以构建角-gantt.min.js和角-gantt.js，我还意识到这些文件还
浏览 3提问于2014-11-04得票数 0
回答已采纳
1回答
我正在从一本书中学习AngularJS，其中一个例子给了我一个带范围的指令。我决定和它一起玩，我遇到了一些不适合我的东西。4种作用域值中有3种可以使用，但1种不同。当我使用player: '=dataPlayer'时，屏幕上的值没有呈现，其余的都可以正常工作。我的假设是，data-是以角的形式保留的，但我在任何地方都找不到。有人知道为什么会这样吗？
<!--Html-->
<div ng-repeat="currentPlayer in players">
<!-- <my-player current-pla
浏览 4提问于2015-01-15得票数 1
回答已采纳
当我使用angular的指令时，我得到了这个错误。
Error: [$compile:tplrt] Template for directive 'header' must have exactly one root element. /apps/dhe.techForm/views/directives/header.html
http://errors.angularjs.org/1.4.8/$compile/tplrt?p0=header&p1=%2Fapps%2Fdhe.techForm%2Fviews%2Fdirectives%2Fheader.h
浏览 0提问于2016-02-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
