Angular 4如何实现默认打开指定div组件？

嘿，刚好碰到过类似的需求！要在Angular 4里实现页面加载时默认显示指定的div（比如学生表单），结合你提到的单选框+*ngIf切换表单的场景，其实操作很简单，核心就是在组件里初始化控制显示状态的变量就行，下面一步步给你拆解：

1. 在组件类中初始化默认选中的角色变量 #

首先，你需要在组件的.ts文件里定义一个用来控制表单显示的变量，比如selectedRole，然后把它的默认值设为你想默认展示的角色（比如'student'）：

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

@Component({
  selector: 'app-role-form',
  templateUrl: './role-form.component.html',
  styleUrls: ['./role-form.component.css']
})
export class RoleFormComponent {
  // 初始化默认选中学生角色，页面加载时自动显示学生表单
  selectedRole: string = 'student';
}

2. 模板中绑定单选框与*ngIf显示逻辑 #

在HTML模板里，把单选框的[(ngModel)]双向绑定到刚才定义的selectedRole变量，然后用*ngIf根据变量值来控制对应div的显示/隐藏：

<!-- 单选切换组 -->
<div class="radio-group">
  <label>
    <input type="radio" name="role" [(ngModel)]="selectedRole" value="student">
    学生
  </label>
  <label>
    <input type="radio" name="role" [(ngModel)]="selectedRole" value="admin">
    管理员
  </label>
</div>

<!-- 学生表单：默认显示 -->
<div *ngIf="selectedRole === 'student'" class="form-card">
  <h3>学生信息表单</h3>
  <input type="text" placeholder="请输入学生姓名" />
  <input type="number" placeholder="请输入学号" />
  <!-- 这里可以添加更多学生专属表单字段 -->
</div>

<!-- 管理员表单：默认隐藏，选中对应单选框后显示 -->
<div *ngIf="selectedRole === 'admin'" class="form-card">
  <h3>管理员信息表单</h3>
  <input type="text" placeholder="请输入管理员账号" />
  <input type="password" placeholder="请输入登录密码" />
  <!-- 这里可以添加更多管理员专属表单字段 -->
</div>

3. 别忘了导入FormsModule #

因为我们用到了[(ngModel)]双向绑定，所以必须在你的模块文件（比如AppModule）里导入FormsModule，否则会报错：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule

import { AppComponent } from './app.component';
import { RoleFormComponent } from './role-form/role-form.component';

@NgModule({
  declarations: [
    AppComponent,
    RoleFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // 把它添加到imports数组里
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

小提示 #

因为用了双向绑定，当你初始化selectedRole为'student'时，对应的单选框会自动被选中，不用手动添加checked属性，Angular会帮我们自动关联状态~

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