当我想用以下程序包版本在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相关问答推荐

FormArray包含嵌套的FormGroups.如何访问嵌套的表单组控件?

当try 使用Angular和PrimeNg手动聚焦输入时,我做错了什么?

自动完成搜索过滤器不适用于Angular 中动态添加的输入字段

带逻辑的组件decorator 中的Angular 主机侦听器属性

笔刷Angular 为17

在Drective Composure API中使用指令输出

如何使用独立组件在ANGLE(16+)中实现嵌套布线

关闭 Dynamsoft Web Twain 弹出窗口

如何以编程方式关闭 ng-bootstrap 模式?

全局异常处理

如何从父路由的组件访问激活的子路由的数据?

如何检测滚动到html元素的底部

如何以Angular 获取嵌套表单组的控件

AOT - Angular 6 - 指令 SomeComponent,预期 0 个参数,但go 有 1 个参数

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

提交后在Angular 2中重置表单

如何在 Angular CLI 的构建时插入内部版本号或时间戳

从 Angular 中的自定义表单组件访问 FormControl

如何使用 Angular CLI 删除包?

来自 chokidar (C:\) 的错误:错误:EBUSY:资源繁忙或锁定,lstat 'C:\DumpStack.log.tmp