>

각각 8의 하이브리드 부트 스트랩을 갖도록 구성된 angularjs 1.6이 있습니다.

각도 8에 2 개의 새로운 구성 요소 DriverDetail 및 DriverDetailLine을 생성했습니다.

@Component({
    selector: 'driver-detail',
    template: require('./driver-detail.component.html')
})
export class DriverDetail {
    @Input('driver') driver: Driver;
    constructor() {}
}

@Component({
    selector: 'driver-detail-line',
    template: require('./driver-detail-line.component.html')
})
export class DriverDetailLine {
    @Input('titleKey') titleKey;
    @Input('icon') icon;
    constructor() {}
}

DriverDetail은 다음과 같이 angularjs에서 사용하도록 다운 그레이드됩니다.

app.directive(
    'driverDetail',
    downgradeComponent({ component: DriverDetail, inputs: ['driver'] }) as angular.IDirectiveFactory,
);

DriverDetailLine이 DriverDetail 내에서 titleKey 입력 매개 변수를 전달하는 경우 :

<driver-detail-line [titleKey]="'IN_TRANSIT'" [icon]="'directions_car'">
</driver-detail-line>

이 오류가 발생했습니다 :

Uncaught Error: Template parse errors: Can't bind to 'title-key' since it isn't a known property of 'driver-detail-line'. 1. If 'driver-detail-line' is an Angular component and it has 'title-key' input, then verify that it is part of this module. 2. If 'driver-detail-line' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" test ][title-key]="'DRIVER_DASHBOARD.IN_TRANSIT'" [icon]="'directions_car'">{{ 'LABEL"): ng:///DriverDetailModule/DriverDetail.html@0:51 at syntaxError (compiler.js:2687) at TemplateParser.parse (compiler.js:12254) at JitCompiler._parseTemplate (compiler.js:27526) at JitCompiler._compileTemplate (compiler.js:27513) at eval (compiler.js:27456) at Set.forEach () at JitCompiler._compileComponents (compiler.js:27456) at eval (compiler.js:27366) at Object.then (compiler.js:2678) at JitCompiler._compileModuleAndComponents (compiler.js:27365)

낙타 케이스 매개 변수를 사용하지 않거나 이름이 낙타가 아닌 케이스 이름으로 변경되면 구성 요소가 올바르게 작동합니다.

또한 다음과 같은 다른 형식으로 시도했습니다 :

[title-key]="'IN_TRANSIT'"
[titlekey]="'IN_TRANSIT'"

하지만 비슷한 오류가 발생했습니다

타사 구성 요소를 사용하려고 할 때도 마찬가지입니다. 낙타의 경우 매개 변수를 사용할 때도 같은 오류가 발생합니다.

많은 감사합니다 미겔

자세한 내용은 편집 :

@NgModule({
    imports: [],
    declarations: [
        DriverDetail,
        DriverDetailLine
    ],
    entryComponents: [
        DriverDetail,
        DriverDetailLine
    ]
})
export class DriverDetailModule {
}


  • 답변 # 1

    마침내 문제를 발견했는데 질문에 표시된 코드가 정확했습니다. 문제는 webpack 빌드 프로세스에서 html의 경우 다음 구성으로 webpack html-loader를 사용합니다.

    {
        test: /\.html$/,
        use: [
        {
            loader: 'html-loader',
            options: {
                minimize: true
            }
        }
    }
    
    

    최소화 옵션이 낙타 케이스 속성을 위반했습니다. 옵션을 지정하지 않거나 false로 설정하면 문제가 해결됩니다.

    "caseSensitive"옵션 (기본적으로 false)이 담당합니다. 축소 프로세스를 유지하려는 경우 :

    {
        test: /\.html$/,
        use: [
        {
            loader: 'html-loader',
            options: {
                minimize: true,
                caseSensitive: true
            }
        }
    }
    
    

    소스 :

    https://webpack.js.org/loaders/html-loader

    https://github.com/kangax/html-minifier#options-quick-reference

  • 이전 objective c - iOS 8 베타 5 투데이 뷰 확장 (위젯)이 연결 대기 중에서 멈춤
  • 다음 c# - NUnit 3+를 사용하여 파일을 어떻게 읽습니까 (테스트 용 Excel 시트의 데이터 사용)?