求助：Angular CLI点击按钮显示内容功能实现问题

Hey there! Let's get that click-to-show feature working for your Angular components. Here's a step-by-step approach tailored to your current setup:

1. Add a Toggle State to Your Content Component #

First, we need a way to track whether the default view should be visible. Open your content.component.ts and add a boolean property to manage this state:

import { Component } from '@angular/core';

@Component({
  selector: 'dm-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent {
  isDefaultViewVisible = false; // Tracks if we show the default content

  toggleDefaultView() {
    this.isDefaultViewVisible = !this.isDefaultViewVisible;
  }
}

2. Update the Content Component Template #

Modify your content.component.html to add a click trigger (we'll use the minimal view area as the clickable element, or you can add a dedicated button) and use *ngIf to control the default view's visibility:

<div class="dm-content" (click)="toggleDefaultView()">
  <ng-content select="dm-minimal-view"></ng-content>
  <!-- Optional: Add a small indicator for clarity -->
  <span style="font-size: 0.8rem; margin-left: 8px;">(Click to expand)</span>
</div>
<div *ngIf="isDefaultViewVisible">
  <ng-content select="dm-default-view"></ng-content>
</div>

If you'd prefer a separate button instead of making the entire minimal view clickable, adjust the template like this:

<div class="dm-content">
  <ng-content select="dm-minimal-view"></ng-content>
  <button (click)="toggleDefaultView()" style="margin-left: 10px;">Show Content</button>
</div>
<div *ngIf="isDefaultViewVisible">
  <ng-content select="dm-default-view"></ng-content>
</div>

3. (Optional) Let Parent Component Control the State #

If you want the parent component to have control over the visibility (e.g., set initial state or toggle from outside), you can add an @Input and @Output for two-way binding:

Update content.component.ts: #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'dm-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent {
  @Input() isDefaultViewVisible = false;
  @Output() isDefaultViewVisibleChange = new EventEmitter<boolean>();

  toggleDefaultView() {
    this.isDefaultViewVisible = !this.isDefaultViewVisible;
    this.isDefaultViewVisibleChange.emit(this.isDefaultViewVisible);
  }
}

Parent component usage: #

<dm-content [(isDefaultViewVisible)]="showContent">
  <dm-minimal-view> Title </dm-minimal-view>
  <dm-default-view> Content </dm-default-view>
</dm-content>

Then add showContent = false; to your parent component's TypeScript file.

4. Style (Optional) #

Add some basic CSS to make the toggle feel more intuitive, like cursor pointer for clickable areas or smooth transitions:

.dm-content {
  cursor: pointer;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}

div[*ngIf] {
  padding: 12px;
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

That's it! This setup will let users click to toggle the visibility of your default view content while keeping your existing content projection structure intact.

内容的提问来源于stack exchange，提问作者Orgest