1

newyouth-app/angular.json

@@ -126,7 +126,10 @@
     }
   },
   "cli": {
-    "schematicCollections": ["@ionic/angular-toolkit"]
+    "schematicCollections": [
+      "@ionic/angular-toolkit"
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

newyouth-app/src/app/edit-tag/README.md

@@ -0,0 +1,3 @@
+# 标签编辑组件
+- 上面：输入框和确认按钮
+- 下面：字符串数组，每个字符串是一个标签

newyouth-app/src/app/edit-tag/edit-tag.component.html

@@ -0,0 +1,7 @@
+<ion-input [value]="userInputText" (ionInput)="userInput($event)" type="text" placeholder="请输入标签"></ion-input>
+<p>当前输入：{{userInputText}}</p><ion-button (click)="addTag()">添加标签</ion-button>
+
+@for(tag of tags;track tags;){
+  <ion-chip>{{tag}}<span (click)="deleteTag(tag)"> &nbsp; X</span></ion-chip>
+
+}

newyouth-app/src/app/edit-tag/edit-tag.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { EditTagComponent } from './edit-tag.component';
+
+describe('EditTagComponent', () => {
+  let component: EditTagComponent;
+  let fixture: ComponentFixture<EditTagComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [EditTagComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditTagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

newyouth-app/src/app/edit-tag/edit-tag.component.ts

@@ -0,0 +1,42 @@
+import { Component, EventEmitter, OnInit,Output } from '@angular/core';
+import { IonInput,IonButton,IonChip } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-edit-tag',
+  templateUrl: './edit-tag.component.html',
+  styleUrls: ['./edit-tag.component.scss'],
+  imports:[
+    IonInput,IonButton,IonChip
+  ],
+  standalone: true,
+})
+export class EditTagComponent  implements OnInit {
+/*
+*用户输入
+*/
+  userInputText:String = "" 
+  userInput(ev:any){
+    console.log(ev);
+    this.userInputText=ev.detail.value;
+    this.onTagChange.emit(this.tags);
+  }
+  /*
+  *标签列表
+  */
+tags:Array<String> =[]
+addTag(){
+  this.tags.push(this.userInputText);
+  this.userInputText ="";
+}
+deleteTag(tag:any){
+  let idx=this.tags.findIndex(item=>item==tag);
+  this.tags.splice(idx,1);
+}
+@Output()
+onTagChange:EventEmitter<Array<String>> = new EventEmitter<Array<String>>();
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

newyouth-app/src/app/tab1/tab1.page.html

@@ -13,5 +13,14 @@
     </ion-toolbar>
   </ion-header>
 
-  <app-explore-container name="健康"></app-explore-container>
+  <app-explore-container name="健康">123</app-explore-container>
+
+  <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>
+
+  <h1>父级页面：从子组件输出事件获取属性</h1>
+  <ul>
+    @for(tag of editTags;track tag;){
+      <li>{{tag}}</li>
+    }
+  </ul>
 </ion-content>

newyouth-app/src/app/tab1/tab1.page.ts

@@ -1,14 +1,20 @@
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { EditTagComponent } from '../edit-tag/edit-tag.component';
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,EditTagComponent],
 })
 export class Tab1Page {
+  editTags:Array<String>=[]
+  setTagsValue(ev:any){
+    console.log("setTagsValue",ev);
+    this.editTags=ev;
+  }
   constructor() {}
 }