Question

我有一个通用的抽象树组件。

我需要能够根据条件动态更改此组件的模板吗？

我认为树逻辑应该单独使用。而且我必须使用树服务创建具有不同模板的两个组件，不是吗？

让我们假设，我有一个国家/城市的树。

在一页上，我需要以DOM结构进行显示：

# lstm autoencoder recreate sequence
from numpy import array
from keras.models import Sequential
from keras.layers import LSTM, Masking
from keras.layers import Dense
from keras.layers import RepeatVector
from keras.layers import TimeDistributed
from keras.utils import plot_model

# define input sequence
sequence = array([[0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9], 
                  [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8],
                  [0.3, 0.4, 0.5, 0.6]])
# make sure to use dtype='float32' in padding otherwise with floating points
sequence = pad_sequences(sequence, padding='post', dtype='float32')


# reshape input into [samples, timesteps, features]
n_obs = len(sequence)
n_in = 9
sequence = sequence.reshape((n_obs, n_in, 1))

# define model
model = Sequential()
model.add(Masking(mask_value=0, input_shape=(n_in, 1)))
model.add(LSTM(100, activation='relu', input_shape=(n_in,1) ))
model.add(RepeatVector(n_in))
model.add(LSTM(100, activation='relu', return_sequences=True))
model.add(TimeDistributed(Dense(1)))
model.compile(optimizer='adam', loss='mse')
# fit model
model.fit(sequence, sequence, epochs=300, verbose=0)
plot_model(model, show_shapes=True, to_file='reconstruct_lstm_autoencoder.png')
# demonstrate recreation
yhat = model.predict(sequence, verbose=0)
print(yhat[0,:,0])

在另一页中，我需要显示相同的DOM，但有所不同。

<div class="root">
    <div class="parent">
       <div class="children"></div>
    </div>
</div>

因此，我当然可以使用一个模板并使用<div class="root"> <div class="parent"> <div class="children"><label></label><input></div> </div> </div>来确定显示/隐藏哪个DOM元素。

但是我需要分离模板并进行动态加载。

Answer 1

显示基于变量的模板。要选择模板，请使用*ngIf。让我举个例子：

共享组件的HTML：

<ng-container *ngIf="showWithoutLabel; else showWithLabel">
    <div class="root">
        <div class="parent">
           <div class="children"></div>
        </div>
    </div>
</ng-container>
<ng-template #showWithLabel>
    <div class="root">
        <div class="parent">
           <div class="children"><label></label><input></div>
        </div>
    </div>
</ng-template>

TypeScript：

showWithoutLabel = false;

如何在Angular中动态更改模板？

1 个答案: