/**/

当我想用以下程序包版本在AOT中编译我当前的项目时,我会遇到问题:

  • @ngtools/webpack@6.0.3
  • @angular@latest (6.0.2)
  • Webpack@4.0.0

my webpack and tsconfig.json configuration can be find here

我遇到了一些与模板上使用的private/protected范围相关的问题,还有一些提取参数给了一些并不真正需要它的函数(例如,不在EventBinding上使用的$Event).

现在我有以下列表,我找不到哪里是我的问题所在:

/路径/收件人/应用程序/标题/主标题/主标题.组成部分html(85,7)::指令TableOfContentComponent,应为0个参数,但得到1个.

我的main-header.component.html文件包含:

// main-header.component.ts
@ViewChildren('headerItems') public headerItems: QueryList<HeaderItemAbstract>;
mainMenuStates = {
    hamburger: false,
    bookmarks: false,
    search: false,
    toc: false,
    medias: false,
    article: false,
    language: false    
};

我的TableOfContentComponent不包含任何@Input属性.

@Component({
    selector: 'playui-table-of-content-template',
    templateUrl: './table-of-content.component.html',
    animations: [slideUpAndDownAnimation]
})
export class TableOfContentComponent extends HeaderItemAbstract implements OnInit {

    toc: TableOfContentModel[];

    devices: DevicesModel;

    tocContentHeight: number;
    tocContentMargin: number;
    menuHeight: string;


    constructor(private tableOfContentService: TableOfContentService,
                private deviceService: DeviceService,
                private elemRef: ElementRef) {
        super();
        this.toc = this.tableOfContentService.tableOfContent;
    }
}

/路径/目的地/应用程序/标题/主标题/汉堡菜单/汉堡菜单.组成部分html(125,5)::指令SliderComponent,应为0个参数,但得到1个.

我的hamburger-menu.component.html接近上面给出的代码:

<ps-slider-component [template]="slidable" [countItems]="associatedDocuments.length">
    <ng-template #slidable>
        <ul class="clearfix">
            <li class="ps-hmt-associated-item-wrapper pull-left slider-item"
                *ngFor="let document of associatedDocuments">
                <a href="{{ document.link }}" target="_blank" class="btn-nostyle">
                    <div class="ps-hmt-image">
                        <img src="{{ document.images.thumbnail }}" alt="">
                    </div>
                    <p class="ps-hmt-title slider-text"
                        [matTooltip]="isArticleView ? null : document.title"
                        [matTooltipPosition]="'above'"
                        [matTooltipClass]="['ps-mat-tooltip', 'ps-mat-tooltip-doc']"
                    >
                        {{ document.title }}
                    </p>
                </a>
            </li>
        </ul>
    </ng-template>
</ps-slider-component>
// On ts side
associatedDocuments: Array<AssociatedDocumentModel>;
@ViewChild('slidable') slidable: ElementRef;

我的SliderComponent看起来像:

export class SliderComponent extends UnsubscribeHelper implements OnInit, OnChanges {

    @Input() template: ElementRef;
    @Input() countItems: number;
    @Input() resetSlide ?: null;
    @Input() fixedHeight?: null;
    @Input() isVariableWidth?: null;
    @Input() isBookmarks?: null;
    @Input() hasSkeleton?: boolean = false;

/路径/收件人/应用程序/标题/主标题/媒体/对话框/图像对话框.组成部分html(34,5)::指令CarouselComponent,应为0个参数,但得到1个.

真的很接近上一次,我想问题是一样的.

/路径/收件人/应用程序/文档/页面/页面.组成部分html(7,9)::指令InfinityPageScrollComponent,应为0个参数,但得到1个.

这里我们没有任何关于InfinityPageScrollComponent的输入,标签是这样的<ps-infinity-page-scroll></ps-infinity-page-scroll>

我知道,当我在我的网页上禁用AOT时,一切都像魅力一样工作.

我试着在AoT Do's and Don'ts上找到解决办法,但没有任何结果.

我还注意到,如果禁用fullTemplateTypeCheck,我将面临大约18000个错误,其中包含一些隐式的any类型,以及在构造函数上声明的服务的更奇怪、未定义的属性.

-EDIT 1:提供抽象类代码:UnsubscribeHelper

export abstract class HeaderItemAbstract extends UnsubscribeHelper implements AfterViewInit {
    public toggleItem: string = 'out';
    public ANIMATION_DURATION = slideUpAndDownAnimationDuration;

    constructor() {
        super();
    }

    // [Some other method]
    /**
     * Self animate after loading on DOM
     */
    ngAfterViewInit()
    {
        // Wait next to to avoid error :
        // ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked
        setTimeout(() => {
            this.toggleAnimation();
        },100);
    }
}

抽象类UnsubscribeHelper的代码:

export abstract class UnsubscribeHelper implements OnDestroy {

    subscriptions: Subscription[] = [];

    ngOnDestroy() {
        this.subscriptions.forEach(sub => sub.unsubscribe());
    }

    addSubscription(subscription: Subscription) {
        this.subscriptions.push(subscription);
    }
}

推荐答案

我在这里准备了minimal, complete, and verifiable example美元

我注意到缺少一个参数@HostListner

问题样本如下:

@HostListener('window:resize', ['$event'])
onResize(): void {
    
}

只需移除'$event'个,效果非常好.

总之,这两个选项都能正常工作:

// When you need the Event variable, you can use following syntax.
@HostListener('window:resize', ['$event'])
onResize($event: Event): void {
    
}

// When you do not need the Event variable, you can use following syntax.
@HostListener('window:resize')
onResize(): void {
    
}

感谢@trichetriche的帮助.

Angular相关问答推荐

Aws 代码部署在 BeforeBlockTraffic 步骤失败,即使在更新策略后也会超时

如何使用指令以Angular 传递默认值

缺少 .angular-cli.json 文件:Angular

如何在 ngFor 循环中创建变量?

Angular 2 通过 [class.className] 绑定添加多个类

如何添加/设置环境 Angular 6 angular.json 文件

ERROR 错误:StaticInjectorError(AppModule)[UserformService -> HttpClient]:

Angular为 4 的可扩展表格行,带有Angularmaterial

Angular - 工作区中未设置配置

Angular 2+ ngModule 中导入/导出的作用

Angular 4 错误:没有 HttpClient 的provider提供者

如何在 Angular 2 中动态添加和删除表单字段

如何从materialAngular使用分页器?

如何在 Angular 2 中链接 HTTP 调用?

使用 EventEmitter 传递参数

Angular:手动重定向到路由

Angular 2 应该使用哪种类型的文件夹 struct ?

如何将 ngFor 重复限制为 Angular 中的某些项目?

Angular 2 http.post() 没有发送请求

我应该如何在 Angular 8 中为 @ViewChild 使用新的静态选项?