Question

child-component通过parent-component包裹在<ng-content>中，并具有一些类似的方法和属性

parent.component

<child-root>
    <!-- child header -->
    <div class="childHeader" [ngClass]="{'slideUp': !slideUpBoole}">
        <div class="properties">
            <button class="button" (click)="slideToggle()">slide toggle</button>
            <button class="button" (click)="fullScreen()">full screen</button>
        </div>
    </div>

    <!-- child body -->
    <div class="childBody" *ngIf="slideUpBoole">
        <div class="row" [ngClass]="{'show': searchBoole}"></div>
    </div>

    <!-- child footer -->
    <div class="childFooter" *ngIf="slideUpBoole">
        <button class="button" (click)="search()">search</button>
    </div>
</child-root>

@Component({
    selector: 'parent-root',
    templateUrl: './parent.component.html',
})
export class ParentComponent {
    /* this code use in the child.component */
    public slideUpBoole: boolean = true;
    public fullScreenBoole: boolean = false;

    public slideToggle() {
        this.slideUpBoole = !this.slideUpBoole;
    }
    public fullScreen() {
        this.fullScreenBoole = !this.fullScreenBoole;
    }
    public search() {
        console.log('do something with connected parent component');
    }
}

child.component

<div class="child">
    <ng-content select=".childHeader"></ng-content>
    <ng-content select=".childBody"></ng-content>
    <ng-content select=".childFooter"></ng-content>
</div>

@Component({
    selector: 'child-root',
    templateUrl: './child.component.html',
})
export class ChildComponent {
    /* move parent-component's code into here */
}

在这种情况下，Angular不允许我在child-component中编写打字稿代码。我可以用哪种方式编写代码，以便将方法和属性包含在child-component或某些service中？在这种情况下，我想尽量避免在parent-component中编写打字稿。

Answer 1

这是我的解决方案。这样解决parent-variable-not-working-inside-of-ng-content

parent.component

<child-root #childRoot>
    <!-- child header -->
    <div class="childHeader" [ngClass]="{'slideUp': !childRoot.slideUpBoole}">
        <div class="properties">
            <button class="button" (click)="childRoot.slideToggle()">slide toggle</button>
            <button class="button" (click)="childRoot.fullScreen()">full screen</button>
        </div>
    </div>

    <!-- child body -->
    <div class="childBody" *ngIf="childRoot.slideUpBoole">
        <div class="row" [ngClass]="{'show': childRoot.searchBoole}"></div>
    </div>

    <!-- child footer -->
    <div class="childFooter" *ngIf="childRoot.slideUpBoole">
        <button class="button" (click)="childRoot.search()">search</button>
    </div>
</child-root>

@Component({
    selector: 'parent-root',
    templateUrl: './parent.component.html',
})
export class ParentComponent {
    /* this code use in the child.component */

}

child.component

<div class="child">
    <ng-content select=".childHeader"></ng-content>
    <ng-content select=".childBody"></ng-content>
    <ng-content select=".childFooter"></ng-content>
</div>

@Component({
    selector: 'child-root',
    templateUrl: './child.component.html',
})
export class ChildComponent {
    /* move parent-component's code into here */
    public slideUpBoole: boolean = true;
    public fullScreenBoole: boolean = false;

    public slideToggle() {
        this.slideUpBoole = !this.slideUpBoole;
    }
    public fullScreen() {
        this.fullScreenBoole = !this.fullScreenBoole;
    }
    public search() {
        console.log('do something with connected parent component');
    }
}

从子组件（由<ng-content>包裹）到父组件的Angular移动方法和属性

1 个答案: