Angular 角度6，Can'；t绑定到'；组织'；因为它不是'；t'的已知属性；appCycleDirection'；（指令）

我有如下指示：

import { Directive, Input, OnInit } from '@angular/core';
import {GoogleMapsAPIWrapper} from '@agm/core';

declare let google: any;
@Directive({
  // tslint:disable-next-line:directive-selector
  selector: 'appCycleDirection'
})
export class CycleDirectionDirective implements OnInit {

  @Input() org;
  @Input() dst;
  @Input() originPlaceId: any;
  @Input() destinationPlaceId: any;
  @Input() waypoints: any;
  @Input() directionsDisplay: any;
  @Input() estimatedTime: any;
  @Input() estimatedDistance: any;
  constructor(private gmapsApi: GoogleMapsAPIWrapper) { }

  ngOnInit() {
    console.log(' In directive ');
    console.log(this.org);
    this.gmapsApi.getNativeMap().then(map => {
      const directionsService = new google.maps.DirectionsService;
      const directionsDisplay = new google.maps.DirectionsRenderer;
      directionsDisplay.setMap(map);
      directionsService.route({
              origin: {lat: this.org.latitude, lng: this.org.longitude},
              destination: {lat: this.dst.latitude, lng: this.dst.longitude},
              waypoints: [],
              optimizeWaypoints: true,
              travelMode: 'TRANSIT'
            }, function(response, status) {
                        if (status === 'OK') {
                          directionsDisplay.setDirections(response);
                          console.log(response);
                        } else {
                          window.alert('Directions request failed due to ' + status);
                        }
      });

    });
  }
}

我在其他组件html中使用此指令，如下所示

<agm-map *ngIf="Address !== undefined" [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <appCycleDirection *ngIf="dst !== undefined"  [org]="org" [dst]="dst"></appCycleDirection>
    <agm-marker  [style.height.px]="map.offsetHeight"  [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

我已将该指令添加到声明数组中，并在根模块app.module.ts内导出数组

甚至我也在上面的html页面中导入了组件

但当我运行代码时，它会抛出以下错误

> Uncaught (in promise): Error: Template parse errors: Can't bind to
> 'org' since it isn't a known property of 'appCycleDirection'.
> ("[latitude]="lat" [longitude]="lng" [zoom]="zoom">
>     <appCycleDirection *ngIf="dst !== undefined"  [ERROR ->][org]="org" [dst]="dst"></appCycleDirection>
>     <agm-marker  [style.height.px]="map.offsetHeight"  ["): ng:///LayoutModule/FindCycleComponent.html@9:50 Can't bind to 'dst'
> since it isn't a known property of 'appCycleDirection'. ("lat"
> [longitude]="lng" [zoom]="zoom">
>     <appCycleDirection *ngIf="dst !== undefined"  [org]="org" [ERROR ->][dst]="dst"></appCycleDirection>
>     <agm-marker  [style.height.px]="map.offsetHeight"  [latitude]="l"): ng:///LayoutModule/FindCycleComponent.html@9:62
> 'appCycleDirection' is not a known element:
> 1. If 'appCycleDirection' is an Angular component, then verify that it is part of this module.
> 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("> <agm-map
> *ngIf="cycleAddress !== undefined" [latitude]="lat" [longitude]="lng" [zoom]="zoom">
>     [ERROR ->]<appCycleDirection *ngIf="dst !== undefined"  [org]="org" [dst]="dst"></appCycleDirection>
>     <agm-m"): ng:///LayoutModule/FindCycleComponent.html@9:4

未捕获（承诺中）：错误：模板解析错误：无法绑定到 >“org”，因为它不是“appCycleDirection”的已知属性。 >（“[纬度]=”纬度“[经度]=”液化天然气“[缩放]=”缩放“> >][org]=“org”[dst]=“dst”> >*ngIf=“cycleAddress！==未定义”[纬度]=“纬度”[经度]=“lng”[缩放]=“缩放”> >[错误->]

---

>在

中包装appCycleDirection，因为您正在使用*ngIf:

<ng-container  *ngIf="dst" >
    <appCycleDirection  [org]="org" [dst]="dst"></appCycleDirection>
</ng-container>

是的，但我已将其设置为未定义，但随着执行的进行，它会有所不同。这是初始初始化，cycleAddress=undefined；directionsDisplay=undefined；lat=12.967197；lng=77.717973；zoom=12；dst=undefined；org=undefined；这也是用于angular 4的吗？